/* Search Container Styles */
.search-container {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 101;
  background-color: #2a2b2a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  height: 60px;
  box-sizing: border-box;
}

.sc-select {
  top: 50px;
}
.sc-select-fr {
  top: 60px;
}

.sc-select-cmp {
  top: 114px;
}
.search-box {
  width: calc(100% - 16px);
  max-width: 100%;
  padding: 12px 40px;
  border-radius: 24px;
  border: none;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  outline: none;
  height: 44px;
  box-sizing: border-box;
}

.search-icon {
  position: absolute;
  left: 35px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
}

/* Sort Header Styles */
.sort-header {
  position: fixed;
  top: 140px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-start;
  padding: 10px 16px;
  background-color: #282727;
  height: 40px;
  box-sizing: border-box;
}

.sort-header-user {
  position: fixed;
  top: 120px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-start;
  padding: 10px 16px;
  background-color: #282727;
  height: 40px;
  box-sizing: border-box;
}

.sort-header-user.league {
  top: 164px;
  justify-content: flex-start;
  background-color: #2a2b2a;
}

.sort-item {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  padding-right: 15px;
  padding-left: 10px;
}

.sort-item.right-align {
  margin-left: auto; 
  margin-right: 8px; 

}


.sort-item.active {
  color: #ffffff;
  font-weight: 700;
}

.sort-triangle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 8px;
}

.sort-triangle.asc {
  border-bottom: 5px solid #F1BE48;
  border-top: none;
  transform: rotate(180deg);
}

.sort-triangle.desc {
  border-top: 5px solid #F1BE48;
  border-bottom: none;
  transform: rotate(180deg);
}




.player-card {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  position: relative;
}

.player-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.player-card.clickable {
  cursor: pointer;
}

.player-card.clickable:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Player Icon Styles */
.player-icon-container {
  position: relative;
  margin-right: 12px;
}

.player-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #F1BE48;
}

.player-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin-top: -0%;
  margin-left: -0%;
}

.position-indicator {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #0A0034;
  z-index: 2;
}

/* Position colors */
.position-P {
  background-color: #FFD600; /* Yellow */
}

.position-D {
  background-color: #00FF7F; /* Green */
}

.position-C {
  background-color: #006eff; /* Blue */
  color: #ffffff;
}

.position-A {
  background-color: #FF4500; /* Red */
}

/* Player Info Styles */
.player-info {
  flex: 1;
}

.player-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.match-info {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.player-team {
  font-weight: 700;
  color: white;
}

/* Player Cost Styles */
.player-cost {
  background-color: #F1BE48;
  border-radius: 12px;
  padding: 4px 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #0A0034;
  min-width: 40px;
  text-align: center;
  margin-left: auto; /* Aggiunto per allineare a destra */
}

/* User profile alignment fix */
.user-profile {
  display: flex;
  align-items: flex-end; /* Align to bottom */
}

/* Multiply contest mini indicator */
.multiply-contest-mini {
  width: 20px;
  height: 20px;
  background-color: #9A6D19;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: white;
  position: relative;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* Consolidated .user-name (versione completa) */
.user-name2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px; /* Same as progress bar width */
}

/* Player List Styles */
.player-list {
  list-style: none;
  padding-top: 110px; /* Add top padding to account for fixed headers */
  padding-bottom: 170px;
  margin: 0 16px;
  margin-bottom: 80px; /* Space for footer */
}




/* Budget Bar - Make it sticky but position it correctly */
.budget-bar {
  position: sticky;
  top: 60px; /* Keep this value to ensure it sticks right below the header */
  left: 0;
  right: 0;
  z-index: 101;
  background-color: #2a2b2a;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  height: 40px;
  box-sizing: border-box;
  justify-content: center;
  margin-top: 18px; /* Add margin to push it down by 18px */
}



/* Teams Section - Adjust positioning */
.teams-section {
  margin-top: 0px; /* Add space between power-ups and teams */
  padding-top: 0; /* Remove the extra padding */
}

/* Opponent List Styles */
.opponent-list {
  list-style: none;
  padding-top: 110px; /* Add top padding to account for fixed headers */
  padding-bottom: 80px;
  margin: 0 0px;
}

.opponent-list.cmp {
  padding-top: 160px; /* Add top padding to account for fixed headers */

}

.opponent-item {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  margin-left: 8px;
  margin-right: 8px;;
  justify-content: space-between;
}

.opponent-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.opponent-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  object-fit: cover;
  background-color: #ffffff;
  border: 1px solid #2a2b2a;
}

.opponent-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.progress-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 200px;
}

.progress-bar-container {
  position: relative;
  height: 6px;
  background-color: #1A1C3D;
  border-radius: 3px;
  overflow: hidden;
  width: 150px;
  margin-right: 6px;
}

.progress-bar-fill {
  height: 100%;
  width: 35%;
  background: linear-gradient(to right, #F1BE48, #ED33B9);
  border-radius: 3px;
}

.progress-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* Small Button Main Style */
.small-button-main {
  background-color: #0A0034;
  border: 2px solid #F1BE48;
  border-radius: 20px;
  padding: 6px 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s;
}

.small-button-main:hover {
  background-color: rgba(254, 66, 8, 0.2);
}

.play-contest-button {
  background-color: #2a2b2a;
  border: 2px solid #F1BE48;
  border-radius: 20px;
  padding: 6px 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s;
}


.play-contest-button.on {
  background-color: #F1BE48;
  color: #000000;
  border: 2px solid #2a2b2a;
}


/* Multiply Window Styles */
.multiply-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(54, 54, 54, 0.8);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.multiply-container {
  background: #282727;
  border-radius: 24px 24px 0 0;
  padding: 24px;
}

.title_centre {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: white;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.multiply-circles {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 32px 0;
}

.multiply-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 20px;
  cursor: pointer;
}

.mc-on {
  background-color: #9A6D19;
  color: white;
}

.mc-locked {
  background-color: rgba(75, 75, 75, 0.2);
  border: 2px solid #9A6D19;
  color: white;
  pointer-events: none; 
  opacity: 0.5;
}

.mc-off {
  background-color: rgba(75, 75, 75, 0.2);
  border: 2px solid #9A6D19;
  color: white;
}
.big-cost {
  width: 120px;
  height: 46px;
  background-color: #F1BE48;
  border-radius: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #0A0034;
  margin: 24px auto;
}

.multiply-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.multiply-button {
  flex: 1;
  margin: 0 8px;
  padding: 12px;
  border-radius: 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}

.multiply-cancel {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.multiply-confirm {
  background-color: #F1BE48;
  color: white;
}


.logo {
  margin-bottom: 40px;
}

.logo h1 {
  font-size: 3.5em;
  margin: 0;
  color: #00ffff;
  font-weight: bold;
  letter-spacing: 2px;
}

.logo p {
  margin: 0;
  font-size: 1em;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.login-container {
  width: 90%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.btn {
  padding: 15px 20px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  border: none;
  font-weight: bold;
}

.btn-google {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-email {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  background-color: #F1BE48;
  color: #333;
}

.btn-create {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  background-color: transparent;
  text-transform: uppercase;
  color: #F1BE48;
  border: 2px solid #F1BE48;
}

.divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: #ccc;
}

.divider::before, .divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ccc;
}

.divider span {
  padding: 0 10px;
}

.terms {
  margin-top: 30px;
  font-size: 0.8em;
  color: #ccc;
}

.terms a {
  color: #ccc;
  text-decoration: underline;
}

    /* Welcome message styles */
    .welcome-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding: 20px;
      text-align: center;
      margin-top: 10px;
    }
    
    .welcome-text {
      font-family: 'Montserrat', sans-serif;
      color: white;
      margin-bottom: 40px;
    }
    
    .welcome-to {
      font-weight: 400;
      font-size: 24px;
      margin-bottom: 0px;
    }
    
    .fanteex-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-size: 48px;
      margin-bottom: 0px;
      color: #F1BE48;
    }
    
    .start-game {
      font-weight: 400;
      font-size: 24px;
    }
    
    .animated-arrows {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: -30px;
    }
    
    .arrow {
      width: 40px;
      height: 40px;
      margin: 0px 0;
      filter: brightness(1);
    }
    
    .arrow1 {
      animation: pulse-color 2s infinite;
      animation-delay: 0s; /* First to animate (top arrow) */
    }
    
    .arrow2 {
      animation: pulse-color 2s infinite;
      animation-delay: 0.5s; /* Second to animate (middle arrow) */
      margin-top: -25px;
    }
    
    .arrow3 {
      animation: pulse-color 2s infinite;
      animation-delay: 1s; /* Last to animate (bottom arrow) */
      margin-top: -25px;
    }
    
    @keyframes pulse-color {
      0% {
        filter: drop-shadow(0 0 0px rgba(255, 165, 0, 0));
      }
      50% {
        filter: drop-shadow(0 0 10px rgba(255, 165, 0, 0.7));
      }
      100% {
        filter: drop-shadow(0 0 0px rgba(255, 165, 0, 0));
      }
    }   

        /* Status Badge Variants */
    .status-badge {
      background-color: #706561;
      color: #ffffff;
    }

    .status-badge-invited {
      background-color: #F1BE48;
      color: #000000;
    }

    .status-badge-pending {
      background-color: #686868;
      color: #ffffff;
    }

    .status-badge-created {
      background-color: #686868;
      color: #ffffff;
    }
    .status-badge-ready {
      color: #F1BE48;
      background-color: #2a2b2a;
    }

    .status-badge-live {
      background-color: #F1BE48;
    }

    .status-badge-win {
      background-color:forestgreen;
      color: #ffffff;
    }
    .status-badge-loss {
      background-color:crimson;
      color: #ffffff;
    }

    .status-badge-draw {
      background-color: #ffffff;
      color: #2a2b2a;
    }

    .sticky-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background-color: #282727;
      width: 100%;
    }
    
    .scrollable-content {
      flex: 1;
      overflow-y: auto;
      padding-bottom: 96px; /* Space for the footer */
    }
    
    
    /* Ensure the FAB stays above the scrollable content */
    #playButton {
      z-index: 101;
    }    /* Fixed header styles */


  /* overlay e container flex */
#modal {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}
#modal.hidden {
  display: none;
}

/* finestra bianca: layout a colonna */
.modal-window {
  background: #fff;
  width: 90%; max-width: 600px;
  max-height: 80vh;        /* non più di 80% altura viewport */
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;        /* scroll solo in .modal-body */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* HEADER FISSO */
.modal-header {
  flex: 0 0 auto;          /* altezza fissa */
  height: 48px;            /* scegli tu */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid #ddd; /* linea di separazione */
  position: relative;      /* riferimento per il close */
  z-index: 1002;
}
.modal-header-spacer {
  flex: 1;                 /* ti permette di tenere X a destra */
}

/* BODY SCROLLABILE */
.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px;
}

/* BOTTONE CLOSE CERCHIO ROSSO */
#modal-close {
  width: 28px; height: 28px;
  background: #F1BE48;
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
#modal-close img {
  width: 16px; height: 16px; display: block;
}


.modal-game-type-overlay {
  /* sfondo semitrasparente al 50% */
  background: rgba(0, 0, 0, 0.5);

  /* blur del contenuto sottostante */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Nasconde con display:none */
.modal-game-type-overlay.hidden {
  display: none;
}

/* Box interno della modale */
.modal-game-type-content {
  background: #282727;
  padding: 1.5rem;
  border-radius: 0.75rem;
  width: 90%;
  max-width: 400px;
  font-family: 'Barlow Condensed', sans-serif;
  text-align: center;
  position: relative;
}

.modal-game-type-title {
  font-family: 'Montserrat', sans-serif; /* Montserrat Regular */
  font-weight: 400;
  color: #fff;       /* nero pieno */
  font-size: 1.25rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* Container delle opzioni */
.modal-game-type-options {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Ogni opzione */
.modal-game-type-option {
  flex: 1;
  background: #000000;
  color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Icona grande */
.modal-game-type-option-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Label in Barlow Condensed */
.modal-game-type-option-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 800;
}

/* Stato disabilitato */
.modal-game-type-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Pulsante close */
.modal-game-type-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #fff;
}

.remove-player-btn{
  width: 24px; 
  height: 24px; 
  cursor: pointer;
}


.opponent-item.selected {
  border: 2px solid #f1be48;
}


/* Loading overlay for login */
.loading-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.loading-overlay.hidden {
  display: none;
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #fff;
  border-top: 4px solid #f1be48;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}