/* 1. Βασικό Container με οριζόντιο Scroll */
.bracket-wrapper {
width: 100%;
overflow-x: auto;
padding: 30px 10px;
background: #fdfdfd;
box-sizing: border-box;
}
/* 2. Ευθυγράμμιση των γύρων */
.tournament-theme {
display: flex;
flex-direction: row;
min-width: 1300px; /* Εξασφαλίζει ότι το layout δεν θα “σπάσει” σε μικρές οθόνες */
margin: 0 auto;
}
/* 3. Η κάθε στήλη-γύρος */
.round {
display: flex;
flex-direction: column;
justify-content: center;
width: 200px; /* Σταθερό πλάτος για κάθε στήλη */
list-style: none;
padding: 0;
margin: 0;
}
/* 4. Το ζευγάρι (Matchup) */
.matchup {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
position: relative;
padding: 0 15px;
}
/* 5. Τα στρογγυλεμένα κουτάκια */
.box {
background: #2c3e50;
border: 2px solid #e67e22;
border-radius: 8px; /* Στρογγυλεμένες γωνίες */
padding: 8px;
margin: 4px 0;
text-align: center;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
position: relative;
z-index: 2;
}
/* Εφέ hover */
.box:hover {
background: #3498db;
color: #f1c40f;
cursor: pointer;
}
/* Διαφορετικό χρώμα για τον νικητή */
.box.winner {
border-color: #2ecc71;
background: #f1c40f;
}
.box.winner:hover { background: #2ecc71; color: #000; }
/* =======================================================
ΑΥΤΟΜΑΤΕΣ ΓΡΑΜΜΕΣ ΣΥΝΔΕΣΗΣ (BLOCK DIAGRAM LINES)
======================================================= */
/* Γραμμή που βγαίνει από το πίσω μέρος κάθε ζευγαριού (δεξιά) */
.round:not(.r-1) .matchup::after {
content: “”;
position: absolute;
right: 0;
width: 15px; /* Το μισό του κενού ανάμεσα στις στήλες */
height: 50%; /* Ενώνει το πάνω με το κάτω κουτάκι */
border-right: 2px solid #e74c3c;
top: 25%;
z-index: 1;
}
/* Φτιάχνει το “πιρούνι” (πάνω και κάτω οριζόντια γραμμή) */
.round:not(.r-1) .matchup .box:first-child::after,
.round:not(.r-1) .matchup .box:last-child::after {
content: “”;
position: absolute;
right: -17px;
top: 50%;
width: 15px;
border-top: 2px solid #e74c3c;
z-index: 1;
}
/* Γραμμή εισόδου για την επόμενη στήλη (αριστερά από το κουτάκι) */
.round:not(.r-32) .matchup::before {
content: “”;
position: absolute;
left: 0;
top: 50%;
width: 15px;
border-top: 2px solid #e74c3c;
z-index: 1;
}
/* Η διαχωριστική γραμμή ανάμεσα στις 4άδες */
.group-line {
position: relative;
width: calc(100% – 10px); /* Πιάνει το πλάτος των κουτιών */
margin: 0 auto;
border-bottom: 2px dashed #9b59b6; /* Διακεκομμένη γραμμή */
height: 0; /* Μηδενικό ύψος για να ΜΗΝ σπρώξει τα κουτάκια προς τα κάτω */
}