/* =========================================================
   TOURNAMENT — Dragon Ball World Collision

   Presentazione del torneo e tabellone a eliminazione diretta.

   Qui dentro c e solo quello che e di questa pagina: il
   riquadro di stato, il tabellone e le sue caselle. Colori,
   pannelli, titoli, pulsanti e caricamento arrivano da ui.css;
   spaziature e allineamenti dalle utility di Bootstrap,
   scritte nel markup.
   ========================================================= */


/* =========================================================
   STATO DEL TORNEO
   ========================================================= */

.tn-status {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 14px;
	background: var(--ui-panel);
	border: var(--ui-border);
	box-shadow: var(--ui-bevel);
	font-size: clamp(6px, 0.75vw, 9px);
	line-height: 1.9;
}

.tn-status b    { color: var(--ui-accent); font-weight: 400; }
.tn-status span { color: var(--ui-muted); }

.tn-status--win b  { color: var(--ui-success); }
.tn-status--lose b { color: var(--ui-danger); }
.tn-status--next b { color: var(--ui-info); }


/* =========================================================
   TABELLONE
   ========================================================= */

.tn-bracket {
	flex: 1 1 auto;
	display: flex;
	gap: clamp(8px, 1.4vw, 20px);
	align-items: stretch;
	overflow-x: auto;
	padding: 4px 2px 12px;
	scrollbar-width: thin;
}

.tn-bracket::-webkit-scrollbar { height: 10px; }
.tn-bracket::-webkit-scrollbar-track { background: #000; }
.tn-bracket::-webkit-scrollbar-thumb { background: var(--ui-accent); border: 2px solid #000; }

.tn-round {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 190px;
}

.tn-round__title {
	padding: 6px 8px;
	border: 2px solid #000;
	background: rgba(0, 0, 0, 0.6);
	color: var(--ui-muted);
	font-size: clamp(5px, 0.65vw, 8px);
	text-align: center;
	text-transform: uppercase;
}

.tn-round.is-current .tn-round__title {
	color: #14161d;
	background: var(--ui-accent);
}

/* Gli incontri si distribuiscono in colonna: turni piu avanzati
   hanno meno incontri e restano allineati al centro */
.tn-round__list {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 6px;
}


/* ---------- Incontro ---------- */

.tn-match {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px;
	border: 2px solid #000;
	background: rgba(6, 8, 16, 0.82);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tn-match.is-player { box-shadow: inset 0 0 0 2px rgba(70, 200, 255, 0.5); }

.tn-match.is-next {
	border-color: var(--ui-accent);
	box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.35);
	animation: tnPulse 1.4s steps(2) infinite;
}

@keyframes tnPulse {
	0%, 100% { box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2); }
	50%      { box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.65); }
}

.tn-match.is-played { opacity: 0.85; }

.tn-match__vs {
	font-size: 6px;
	text-align: center;
	color: var(--ui-muted);
}


/* ---------- Partecipante ---------- */

.tn-slot {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 4px 6px;
	background: rgba(255, 255, 255, 0.04);
	border-left: 4px solid transparent;
}

.tn-slot--empty { opacity: 0.4; }

.tn-slot.is-you  { border-left-color: var(--ui-info); }
.tn-slot.is-boss { border-left-color: var(--ui-boss); }

.tn-slot.is-winner {
	background: rgba(70, 209, 127, 0.14);
	border-left-color: var(--ui-success);
}

.tn-slot.is-loser {
	opacity: 0.42;
	filter: saturate(0.3);
	text-decoration: line-through;
}

.tn-slot__icons {
	display: flex;
	flex: 0 0 auto;
}

.tn-slot__icons img {
	width: 20px;
	height: auto;
	border: 2px solid #000;
	background: var(--ui-panel-solid);
	image-rendering: pixelated;
}

/* Nelle squadre da cinque i ritratti si sovrappongono un poco */
.tn-slot__icons img + img { margin-left: -6px; }

.tn-slot__name {
	flex: 1 1 auto;
	overflow: hidden;
	font-size: clamp(5px, 0.6vw, 7px);
	line-height: 1.5;
	text-overflow: ellipsis;
	white-space: nowrap;
}


@media (max-width: 700px) {
	.tn-round { min-width: 158px; }
	.tn-slot__icons img { width: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.tn-match.is-next { animation: none !important; }
}