/* Modern Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #000;
    color: #fff;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(0.5rem, 2vw, 2rem);
}

.scoreboard {
    width: 100%;
    max-width: 1920px; /* Optimized for large screens */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1a1a1a, #000);
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    padding: clamp(1rem, 2vw, 2rem);
    overflow: hidden; /* Prevent overlaps */
}

.mode-switch {
    display: flex;
    gap: clamp(0.5rem, 1vw, 1rem);
    margin-bottom: clamp(0.5rem, 1vw, 2rem);
    flex-wrap: wrap; /* Prevent overflow on very small screens */
    justify-content: center;
}

.mode-btn {
    padding: clamp(0.3rem, 1vw, 0.5rem) clamp(1rem, 2vw, 2rem);
    background: #333;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: clamp(0.8rem, 2vw, 1.5rem);
    min-width: 80px; /* Ensure buttons don't shrink too much */
}

.mode-btn.active {
    background: #4caf50; /*color verde al activar */
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.mode-btn:hover {
    background: #666;
}

.team-names {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: clamp(0.5rem, 1vw, 2rem);
    gap: clamp(0.5rem, 1vw, 1rem);
}

.team-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid #fff;
    color: #fff;
    font-size: clamp(1rem, 3vw, 2.5rem);
    text-align: center;
    width: 45%;
    transition: border-color 0.3s;
    padding: clamp(0.2rem, 0.5vw, 0.5rem);
}

.team-input:focus {
    border-color: #4caf50;
    outline: none;
}

.points-section {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: clamp(0.5rem, 1vw, 2rem);
    gap: clamp(0.5rem, 1vw, 1rem);
}

.controls {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 1rem);
}

.control-btn {
    width: clamp(3rem, 6vw, 6rem);
    height: clamp(3rem, 6vw, 6rem);
    border-radius: 10%;
    font-size: clamp(1.5rem, 4vw, 3rem);
    cursor: pointer;
    transition: transform 0.2s;
    border: none;
}

.add {
    background: #4caf50;
    color: #fff;
}

.subtract {
    background: #f44336;
    color: #fff;
}

.control-btn:hover {
    transform: scale(1.1);
}

.display {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
}

.point-display {
    font-size: clamp(5rem, 15vw, 12rem);
    background: #2196f3;
    color: #ffeb3b;
    padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
    transition: all 0.3s;
    text-align: center;
    min-width: 0; /* Prevent overflow */
    overflow: hidden; /* No text overflow */
}

.mode-specific {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
    width: 30%;
}

.pro-elements, .liga-elements {
    width: 100%;
    text-align: center;
}

.games-sets {
    display: flex;
    justify-content: space-between;
    font-size: clamp(0.5rem, 3.5vw, 4rem);
    gap: clamp(0.5rem, 2vw, 2rem);
}

.gs-left, .gs-right {
    display: flex;
    gap: clamp(0.3rem, 0.5vw, 1rem);
    flex-wrap: wrap; /* Prevent overflow */
    }

.games-sets span span {
    background: #333;
    padding: clamp(0.3rem, 0.5vw, 0.5rem) clamp(0.5rem, 1vw, 1rem);
    border-radius: 10px;
}

.serve-indicator {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
    font-size: clamp(1rem, 3vw, 2rem);
    justify-content: center;
    flex-wrap: nowrap;
}

.arrow {
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: #ffeb3b;
    visibility: hidden;
}

.arrow.active {
    visibility: visible;
}

.tiebreak {
    font-size: clamp(2rem, 6vw, 4rem);
    color: #f44336;
    display: none;
}

.blinking {
    animation: blink 1s infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

.controls-bottom {
    display: flex;
    flex-direction: row;
    gap: clamp(0.5rem, 1vw, 1rem);
    margin-top: clamp(0.5rem, 1vw, 2rem);
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on very small screens */
}

.fullscreen-btn {
    padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
    background: red;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: clamp(0.8rem, 2vw, 1.5rem);
    cursor: pointer;
    transition: all 0.3s;
    min-width: 120px; /* Ensure visibility */
}
    .reset-btn {
    padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
    background: red;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: clamp(0.8rem, 2vw, 1.5rem);
    cursor: pointer;
    transition: all 0.3s;
    min-width: 120px;
    }
  

.reset-btn:hover {
    background: #d32f2f;
    transform: scale(1.05);
}

/* Agrega estos estilos a tu archivo .css existente. 
   Puedes configurar los colores editando las variables CSS (--clock-text-color, --clock-bg-color, etc.).
   Usa una fuente moderna como 'Orbitron' (incluida vía Google Fonts, agrégala en tu <head> si no la tienes). */



#modern-clock {
    --clock-text-color: #00ff00; /* Color del texto (verde neón por defecto, configurable) */
    --clock-bg-color: #1a1a1a; /* Color de fondo (gris oscuro por defecto, configurable) */
    --clock-shadow-color: rgba(0, 255, 0, 0.5); /* Color de la sombra (verde neón suave por defecto) */
    --clock-font-size: 2rem; /* Tamaño de fuente ajustable */
    
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 1rem 2rem;
    background-color: var(--clock-bg-color);
    border-radius: 15px;
    box-shadow: 0 0 20px var(--clock-shadow-color);
    font-family: 'Orbitron', sans-serif; /* Fuente moderna digital */
    font-size: var(--clock-font-size);
    color: var(--clock-text-color);
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

#modern-clock:hover {
    box-shadow: 0 0 30px var(--clock-shadow-color);
}

#hours, #minutes, #seconds {
    font-weight: 700;
}

#ampm {
    font-size: 1.5rem;
    margin-left: 0.5rem;
    opacity: 0.8;
}

/* Responsive Media Queries - Enhanced for super responsiveness */

/* Tablets and medium screens */
@media (max-width: 720px) {
    .team-names {
        flex-direction: column;
        align-items: center;
    }

    .team-input {
        width: 80%;
    }

    .points-section {
        flex-direction: column;
        align-items: center;
    }

    .display {
        flex-direction: column;
        gap: clamp(1rem, 2vw, 2rem);
        width: 100%;
    }

    .mode-specific {
        width: 100%;
        order: 2; /* Place below points on medium screens */
    }

    .controls {
        flex-direction: row;
        justify-content: center;
        gap: clamp(1rem, 2vw, 2rem);
    }

    .controls-left {
        order: -1; /* Above left point */
    }

    .controls-right {
        order: 3; /* Below right point */
    }

    .controls-bottom {
        flex-direction: column;
        align-items: center;
    }
}

/* Mobile screens (e.g., phones) */
@media (max-width: 480px) {
    .container {
        padding: clamp(0.5rem, 2vw, 1rem);
    }

    .scoreboard {
    width: 80%;
    max-width: 380px; /* Optimized for large screens */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1a1a1a, #000);
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    padding: clamp(.5rem, 1vw, 1rem);
    overflow: hidden; /* Prevent overlaps */
    }

    .mode-switch {
        flex-direction: row;
        justify-content: center;
        gap: clamp(0.5rem, 2vw, 1rem);
    }

    .team-names {
        flex-direction: column;
        align-items: center;
        gap: clamp(0.5rem, 2vw, 1rem);
    }

    .team-input {
        width: 100%;
        font-size: clamp(1.2rem, 5vw, 2rem);
    }

    .points-section {
        flex-direction: column;
        gap: clamp(0.5rem, 2vw, 1rem);
    }

    .display {
        flex-direction: column;
        gap: clamp(0.5rem, 2vw, 1rem);
        align-items: center;
    }

    .point-display {
        font-size: clamp(4rem, 20vw, 8rem);
        padding: clamp(0.5rem, 2vw, 1rem);
        width: 100%;
        max-width: 80vw;
    }

    .mode-specific {
        width: 100%;
        gap: clamp(0.3rem, 1vw, 0.5rem);
    }

    .games-sets {
        flex-direction: column;
        align-items: center;
        font-size: clamp(1rem, 4vw, 1.5rem);
    }

    .gs-left, .gs-right {
        flex-direction: row;
        justify-content: center;
    }

    .serve-indicator {
        font-size: clamp(1rem, 4vw, 1.5rem);
        gap: clamp(0.3rem, 1vw, 0.5rem);
    }

    .arrow {
        font-size: clamp(1.2rem, 5vw, 2rem);
    }

    .tiebreak {
        font-size: clamp(1.5rem, 8vw, 3rem);
    }

    .controls {
        flex-direction: row;
        gap: clamp(0.5rem, 2vw, 1rem);
        justify-content: center;
    }

    .control-btn {
        width: clamp(2.5rem, 12vw, 4rem);
        height: clamp(2.5rem, 12vw, 4rem);
        font-size: clamp(1.2rem, 6vw, 2rem);
    }

    .controls-bottom {
        flex-direction: column;
        gap: clamp(0.5rem, 2vw, 1rem);
        align-items: center;
        width: 100%;
    }

    .reset-btn {
        width: 200%;
        max-width: 300px;
        font-size: clamp(0.8rem, 4vw, 1.2rem);
        padding: clamp(0.5rem, 2vw, 1rem);
        background-color: red;
    }
      .reset-btn {
        width: 200%;
        max-width: 300px;
        font-size: clamp(0.8rem, 4vw, 1.2rem);
        padding: clamp(0.5rem, 2vw, 1rem);
        background-color: red;
    }
}

/* Very small screens (e.g., older phones <480px) */
@media (max-width: 280px) {
    .scoreboard {
        justify-content: flex-start;
        padding: 0.2rem;
    }

    .mode-switch {
        flex-direction: column;
        gap: 0.2rem;
    }

    .team-input {
        font-size: clamp(.5rem, 3vw, 1.0rem);
    }

    .point-display {
        font-size: clamp(1.5rem, 12.5vw, 3rem);
    }

    .control-btn {
        width: clamp(1rem, 7.5vw, 1.5rem);
        height: clamp(1rem, 7.5vw, 1.5rem);
        font-size: clamp(.5rem, 4vw, 1.0rem);
    }

    .reset-btn {
        width: 50%;
        font-size: clamp(0.3rem, 2vw, .5rem);
    }

    
    .points-section, .display, .mode-specific {
        min-height: auto; /* Allow natural flow */
    }
}

/* Large screens adjustments (unchanged) */
@media (min-width: 1920px) {
    .scoreboard {
        padding: 1%;
    }

    .point-display {
        font-size: 15vw;
    }

    .control-btn {
        width: 8vw;
        height: 8vw;
        font-size: 5vw;
    }
}

/* Estilos para el login */
.login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.login-form {
    background: linear-gradient(135deg, #1a1a1a, #000);
    padding: clamp(1rem, 2vw, 2rem);
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    text-align: center;
    width: clamp(20rem, 40vw, 30rem);
}

.login-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid #fff;
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.5rem);
    text-align: center;
    width: 100%;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(0.2rem, 0.5vw, 0.5rem);
}

.login-input:focus {
    border-color: #4caf50;
    outline: none;
}

.login-btn {
    padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
    background: #4caf50;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: clamp(0.8rem, 2vw, 1.5rem);
}

.login-btn:hover {
    background: #66bb6a;
}

.hidden {
    display: none;
}
/* ==================================================================
   OPTIMIZACIÓN ESPECÍFICA PARA CELULARES 6.6–6.8" EN MODO HORIZONTAL
   (pantalla ~1080×2400 girada → altura lógica ≈ 480–550px)
   ================================================================== */

@media screen and (orientation: landscape) and (max-height: 560px) {
  
  /* Reducimos paddings generales para ganar altura */
  .container,
  .scoreboard {
    padding: 0.5rem !important;
  }

  /* Nombres de equipo más compactos */
  .team-names {
    margin-bottom: 0.5rem;
    gap: 0.5rem;
  }

  .team-input {
    font-size: clamp(1rem, 4vw, 2rem) !important;
    padding: 0.2rem 0 !important;
  }

  /* Puntos más pequeños pero perfectamente legibles */
  .point-display {
    font-size: clamp(6rem, 18vw, 10rem) !important;
    padding: clamp(0.4rem, 1vw, 0.8rem) clamp(0.8rem, 2vw, 1.5rem) !important;
    border-radius: 15px;
  }

  /* Controles (+ / -) más compactos pero toque fácil */
  .control-btn {
    width: clamp(3.5rem, 10vw, 5rem) !important;
    height: clamp(3.5rem, 10vw, 5rem) !important;
    font-size: clamp(1.8rem, 5vw, 3rem) !important;
  }

  /* Sección de puntos más apretada */
  .points-section {
    gap: 0.5rem;
    margin-bottom: 0.8rem;
  }

  .display {
    gap: 0.8rem;
  }

  /* Modo PRO / LIGA – más compacto */
  .mode-specific {
    gap: 0.4rem;
  }

  .games-sets {
    font-size: clamp(1.2rem, 4vw, 2.5rem);
    gap: 1rem;
  }

  .games-sets span span {
    padding: 0.3rem 0.6rem;
  }

  /* Indicador de saque y tiebreak más pequeños */
  .serve-indicator {
    font-size: clamp(1.2rem, 3.5vw, 2rem);
    gap: 0.5rem;
  }

  .arrow {
    font-size: clamp(1.8rem, 5vw, 3rem);
  }

  .tiebreak {
    font-size: clamp(2rem, 6vw, 4rem);
  }

  /* Reloj más pequeño pero visible */
  #modern-clock {
    --clock-font-size: clamp(1.2rem, 3vw, 2rem);
    padding: 0.6rem 1.2rem;
    margin-top: 0.3rem;
  }

  /* Botones inferiores (Reset + Fullscreen) en fila y más compactos */
  .controls-bottom {
    flex-direction: row !important;
    gap: 1rem;
    margin-top: 0.8rem;
    flex-wrap: nowrap !important;
  }

  .fullscreen-btn,
  .reset-btn {
    padding: clamp(0.6rem, 1.5vw, 1rem) clamp(1.2rem, 3vw, 2rem) !important;
    font-size: clamp(0.9rem, 2.5vw, 1.4rem) !important;
    min-width: auto !important;
    width: auto !important;
    flex: 1;
    max-width: 180px;
  }

  /* Modo switch más compacto */
  .mode-switch {
    gap: 0.6rem;
    margin-bottom: 0.8rem;
  }

  .mode-btn {
    padding: 0.4rem 1rem;
    font-size: clamp(0.8rem, 2.2vw, 1.2rem);
    min-width: 70px;
  }

  /* Login en landscape también */
  .login-form {
    width: clamp(280px, 80vw, 500px);
    padding: 1.5rem;
  }
}

/* Extra: para pantallas muy altas en portrait (evita que quede demasiado vacío) */
@media screen and (orientation: portrait) and (min-height: 800px) {
  .scoreboard {
    padding: 2rem;
  }
}