/* 
 * Εισάγουμε τη γραμματοσειρά Cera Pro Modern από το αρχείο σου (CeraPROModern-Medium.ttf).
 * Πρόσεξε να την τοποθετήσεις στο ίδιο φάκελο ή να προσαρμόσεις το μονοπάτι (url).
 */
@font-face {
    font-family: 'Cera Pro Modern';
    src: url('fonts/CeraPROModern-Medium.woff2') format('woff2'),
         url('fonts/CeraPROModern-Medium.woff') format('woff'),
         url('fonts/CeraPROModern-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Γενικές ρυθμίσεις test*/
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Cera Pro Modern', sans-serif;
  background-color: #F2F2F2;
  color: #222;
}

/* Ενιαίο κουτί που αγκαλιάζει header + πίνακα */
.container {
  width: 80%;
  max-width: 1300px; /* αν θες ένα ανώτατο όριο */
  margin: 30px auto;
  /* η height μεγαλώνει αυτόματα */
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  padding: 20px;
  border-radius: 10px;
}

/* Επίσης στρογγυλεμένες γωνίες στον πίνακα */


/* Header μέσα στο λευκό πλαίσιο */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; /* λίγο κενό κάτω από το header πριν τον πίνακα */
}

/* Λογότυπο/Κείμενα */
.logo-area {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 60px;
  margin-right: 10px;
}

.logo-text .title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.logo-text .year {
  font-size: 18px;
  line-height: 1;
}

.header-actions {
  display: flex;
  align-items: center;
}

.info-button {
  font-family: inherit;
  background-color: transparent;
  border: none;
  color: #333;
  font-size: 14px;
  margin-right: 20px;
  cursor: pointer;
}

.info-button:hover {
  text-decoration: underline;
}

.link-button {
  font-family: inherit;
  background-color: transparent;
  border: none;
  color: #333;
  font-size: 14px;
  margin-right: 20px;
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

.login-button {
  cursor: pointer;
}

/* Εσωτερικό περιτύλιγμα μόνο για τυχόν styling του table */
.table-wrapper {
  /* Δεν βάζουμε άλλο background εδώ, 
     το έχει ήδη η .container */
     overflow-x: auto;      /* είχε ήδη -> ranking-scroll, δεν πειράζει */
     overflow-y: visible;
     border-radius: 10px;   /* για να μείνουν τα στρογγυλέματα */
}

/* Βασικό στυλ πίνακα */
.score-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  border-radius: 10px; /* Στρογγυλεμένες γωνίες και στον πίνακα */
  /*overflow: hidden; Διατηρεί τις γωνίες στο border-collapse */
}

.score-table thead {
  border-bottom: 2px solid #E0E0E0;
}

.score-table th, 
.score-table td {
  padding: 12px;
  vertical-align: middle;
  font-size: 14px;
}

.score-table th {
  font-weight: normal;
  color: #555;
}

.score-table tbody tr {
  border-bottom: 1px solid #E0E0E0;
}
.score-table tbody tr:last-child {
  border-bottom: none;
}

/* Εικονίδιο ομάδας */
.team-logo {
  height: 24px;
  width: 24px;
  object-fit: contain;
  margin-right: 6px;
  vertical-align: middle;
}

/* Βασικό στυλ για τις γραμμές */
.score-table tbody tr {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    position: relative;
    z-index: 1;
}

/* Όταν περνάει το ποντίκι από πάνω */
.score-table tbody tr:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
    position: relative;
    background-color: #FFF;
    z-index: 5;
}

/* Γενικό container για τους αγώνες */
.games-container {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    background: #FFFFFF; /* Ίδιο φόντο με το ranking */
    padding: 10px;
}

/* Περιοχή που περιέχει τα παιχνίδια */
.games-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    width: 90%;
    scrollbar-width: none; /* Απόκρυψη scrollbar (Firefox) */
    -ms-overflow-style: none; /* Απόκρυψη scrollbar (IE/Edge) */
}

/* Απόκρυψη scrollbar για Chrome/Safari */
.games-wrapper::-webkit-scrollbar {
    display: none;
}

/* Κάθε αγώνας (box) */
.game-box {
    background: #EAEAEA; /* Απαλό γκρι */
    border-radius: 10px;
    padding: 12px;
    margin: 0 8px;
    min-width: 180px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Αφαιρούμε το hover effect */
.game-box:hover {
    transform: none;
    box-shadow: none;
}

/* Κείμενο με τον αριθμό του αγώνα */
.match-number {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}

/* Πληροφορίες παιχνιδιού */
.game-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Λογότυπα ομάδων */
.team-logo {
    height: 24px;
    width: 24px;
    object-fit: contain;
}

/* Όνομα ομάδας */
.team-name {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase; /* Όλα κεφαλαία */
}


/* Αν δεν έχει παιχτεί, εμφανίζει 'VS' */
.vs {
    font-size: 14px;
    font-weight: bold;
    color: black;
}

/* Σκορ όταν έχει παιχτεί */
.score {
    font-size: 16px;
    font-weight: bold;
    color: #009900;
}

/* Κουμπιά αριστερά/δεξιά */
.scroll-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: black;
}

.login-container {
    position: absolute;
    top: 0px;
    right: 0px;
}

/*.login-button {
    background-color: #007BFF;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

.login-button img {
    width: 83px;
    height: 55px;
}


.bracket-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
}

.bracket-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 200px;
}

.match-box {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  margin: 10px 0;
  padding: 8px;
  border-radius: 8px;
  width: 250px;
  text-align: center;
}

.match-box-pf {
display: block;
  background-color: #f9f9f9;
  margin: 10px auto;
  padding: 8px;
  width: 180px;
  text-align: center;
}

.bracket-wrapper {
  position: relative;
  width: 1200px;    /* => κρατά ακριβώς όσο χώρο χρειάζεται */
  min-height: 600px;
}

.bracket-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  min-height: 500px;
  margin: 0 10px;
}

/* π.χ. column1: (3v4 & 5v6) */
.col1-top,
.col1-bottom { 
  margin-bottom: 40px; /* χώρο για βελάκια */
}

/* Η στήλη 2 (Decider) την κεντράρουμε κατακόρυφα */
.col2 {
  justify-content: center; /* έτσι ώστε το decider να 'κάθεται' στη μέση */
}

/* Στήλη 3: Semifinals. Δύο box: top (Semifinal_B) + bottom (Semifinal_A). */
.semi-top {
  margin-bottom: 60px;
}
.semi-bottom {
  margin-top: 60px;
}

/* Στήλη 4: Final */
.col4 {
  justify-content: center;
}

/* Arrow containers: position absolute ή relative, και label W/L */
.arrow-line {
  position: absolute; /* για να σχεδιάσεις γραμμές που διασχίζουν τις στήλες */
  width: 100px;   /* πλάτος βέλους */
  height: 2px;
  background: #000;
}

/* Ένα label W/L */
.arrow-label {
  position: absolute;
  font-weight: bold;
  color: #000;
  transform: translate(-50%, -50%);
  top: -10px; /* π.χ. */
  left: 50%;
}


/* Αφαιρούμε bold από .team-name, .score */
.team-name-pf {
  font-size: 14px;
  font-weight: normal; /* όχι bold */
  text-transform: uppercase;
  margin: 0 3px;
}
.score-pf {
  font-size: 16px;
  font-weight: bold; 
  color: #000; /* μαύρο */
  margin: 0 1px;
}

/* Για να βγει λογότυπο δίπλα στο όνομα */
.team-logo-mini {
  height: 24px;
  width: 24px;
  margin-right: 2px;
  vertical-align: middle;
}


.arrow-3v4-w {
  top: 100px;   /* το σημείο εκκίνησης */
  left: 220px;  /* λίγο μετά το col1 */
  width: 100px; /* πόση οριζόντια απόσταση */
  height: 2px;
}


/*  ---  Οριζόνιο scroll για το bracket  ---  */
.bracket-scroll{
  overflow-x: auto;      /* φτιάξε μπάρα κύλισης οριζόντια */
  overflow-y: visible;   /* άσε το ύψος ελεύθερο */
  width: 100%;           /* όσο το container */
  padding-bottom: 12px;  /* λίγο κενό ώστε να μη «κολλάει» η μπάρα */
}


.bracket-scroll::-webkit-scrollbar{
  height: 8px;
}
.bracket-scroll::-webkit-scrollbar-track{
  background: transparent;
}
.bracket-scroll::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 4px;
}


/* οριζόνια κύλιση */
.ranking-scroll{
  overflow-x: auto;
  width: 100%;
}

/* «κολλάμε» την 1η πραγματική στήλη (η με τα ονόματα) */
.score-table td:nth-child(2),
.score-table th:nth-child(2){
  position: sticky;
  left: 0;
  top: 0; 
  background: #fff;   /* ίδιο φόντο για να μη δείχνει διαφάνεια */
  z-index: 6;         /* >1 για να περνάει πάνω από τις άλλες */
  box-sizing: border-box;
}

/* λίγο στενότερη γιατί θα γράψουμε συντομογραφίες */
.score-table td:nth-child(2){
  max-width: 140px;
  white-space: nowrap;
}


/* ----------  Μ Ο D A L  (κοινό για Info & Ομάδες)  ---------- */
.modal-backdrop{
    position:fixed; inset:0;
    background:rgba(0,0,0,.35);
    display:flex; justify-content:center; align-items:flex-end;   /* αρχικά από κάτω */
    opacity:0; pointer-events:none;
    transition:opacity .35s ease;
    z-index:900;             /* πάνω απ’ όλα */
}
.modal-backdrop.show{ opacity:1; pointer-events:auto; }

.modal{
    width:90%; max-width:1000px;
    background:#fff; border-radius:14px 14px 0 0;
    box-shadow:0 -2px 14px rgba(0,0,0,.25);
    transform:translateY(100%);          /* “κρυμμένο” εκτός οθόνης */
    transition:transform .35s ease;
}
.modal-backdrop.show .modal{ transform:translateY(0); }

.modal-header{
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 22px 12px;
    border-bottom:1px solid #eee;
}
.modal-title{ font-size:20px; font-weight:700; }
.modal-close{
    background:none; border:none; font-size:24px; line-height:1;
    cursor:pointer; color:#888;
}
.modal-body{ padding:22px; line-height:1.2; }

/* ειδικά για modal ομάδας */
.team-modal-inner{ display:flex; gap:26px; }
.team-logo-big{ width:120px; height:120px; object-fit:contain; }
.team-separator{
    width:1px; background:#e0e0e0;
    margin:8px 0;           /* «κοντύτερη» από το πλήρες ύψος */
}
.team-text{ 
    flex:1;
    text-align: justify;
}