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

body{
    background:url('Fondo.jpg') no-repeat center;
    background-size:cover;
}

/* CONTENEDOR */
.padre{
    display:flex;
    flex-direction:column;
}

/* FILA SUPERIOR */
.fila-superior{
    display:flex;
    justify-content:center;
    align-items:center;

    width:60%;
    margin:auto;
    margin-top:10px;

    padding:10px;

    font-size:2em;
    font-weight:bold;
    text-align:center;
    color:#dc2af4;

    background-color:white;
    border:3px solid #dc2af4;
    border-radius:15px;
}

/* FILA CENTRAL */
.fila-central{
    display:flex;
    justify-content:center;
    align-items:center;

    width:35%;
    margin:auto;
    margin-top:10px;

    gap:20px;
}

/* PIN */
.recuadro-pin{
    width:60px;
    height:60px;

    font-size:20px;
    text-align:center;

    border:2px solid #dc2af4;
    border-radius:10px;

    background-color:#f5f5ff;
}

/* LINEA */
.linea-divisoria{
    width:50%;
    height:3px;
    margin:auto;
    margin-top:10px;

    background-color:#dc2af4;
}

/* INFO */
.fila-info{
    display:flex;
    justify-content:center;
    align-items:center;

    width:35%;
    margin:auto;
    margin-top:10px;

    gap:20px;

    color:#dc2af4;
    font-weight:bold;
}

.temporizador{
    padding:5px;
    border:2px solid #dc2af4;
    border-radius:10px;
    background-color:white;
}

.intentos{
    padding:5px;
    border:2px solid #dc2af4;
    border-radius:10px;
    background-color:white;
}

/* TECLADO */
.fila-inferior{
    display:grid;

    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:repeat(5,60px);

    width:45%;
    margin:auto;
    margin-top:10px;

    gap:5px;
}

/* BOTONES (MANTENIDOS) */
.boton{
    width:100%;
    height:55px;
    font-size:1.5em;
    font-weight:600;

    color:#dc2af4;
    border:2px solid #9b59b6;
    border-radius:12px;

    background:linear-gradient(to bottom,#7d3c98,#8e44ad 50%,#a569bd);
    box-shadow:0 3px 6px rgba(0,0,0,.25);

    cursor:pointer;
}

.boton:hover{
    background:linear-gradient(to bottom,#8e44ad,#9b59b6 50%,#b085d1);
}

.boton:active{
    transform:translateY(3px);
}

/* EXPLICACION */
.fila-explicacion{
    width:60%;
    margin:auto;
    margin-top:10px;

    color:#dc2af4;

    display:flex;
    justify-content:center;
}

/* BOCADILLO */
.bocadillo{
    width:100%;
    max-width:800px;

    background:rgba(255,255,255,0.9);
    border:3px solid #dc2af4;
    border-radius:15px;

    padding:15px;

    text-align:center;
}

.bocadillo p{
    margin-bottom:10px;
}

.bocadillo img{
    width:300px;
    height:180px;
    object-fit:cover;
    border-radius:10px;
}

/* POPUP GENERAL */
.popup{
    display:none;
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background-color:rgba(0,0,0,0.7);

    justify-content:center;
    align-items:center;
}

/* POPUP BASE (SIMPLE) */
.popup-contenido{
    position:relative;

    background-color:white;
    border:3px solid #dc2af4;
    border-radius:15px;

    padding:20px;
    width:90%;
    max-width:400px;

    text-align:center;
    color:#dc2af4;
}

/* 🔥 POPUP ESPECIAL (VICTORIA / DERROTA) */
.popup-contenido.especial{
    background:linear-gradient(to bottom,#ffffff,#e0e0ff);
    border:4px solid #dc2af4;

    box-shadow:
        0 10px 20px rgba(0,0,0,.4),
        inset 0 -3px 5px rgba(255,255,255,.5);
}

/* IMAGENES Y VIDEO */
.popup-contenido img,
.popup-contenido video{
    width:100%;
    max-width:250px;
    margin-top:10px;
    border-radius:10px;
}

/* BOTON CERRAR */
#cerrarPopup,
#cerrarPopup2,
#cerrarVictoria,
#cerrarDerrota{
    position:absolute;
    top:5px;
    right:10px;

    font-size:28px;
    font-weight:bold;
    cursor:pointer;
    color:#dc2af4;
}

/* =========================
   RESPONSIVE
   ========================= */

/* TABLETS */
@media (max-width:1024px){
    .fila-superior{width:75%;font-size:1.8em;}
    .fila-central{width:50%;}
    .fila-inferior{width:70%;}
    .fila-explicacion{width:75%;}
}

/* MOVILES */
@media (max-width:768px){
    .fila-superior{width:90%;font-size:1.5em;}
    .fila-central{width:70%;gap:10px;}
    .recuadro-pin{width:45px;height:45px;}
    .fila-inferior{width:85%;}
    .fila-explicacion{width:85%;}
}

/* MOVILES PEQUEÑOS */
@media (max-width:480px){
    .fila-superior{font-size:1.3em;}
    .fila-central{width:85%;}
    .recuadro-pin{width:38px;height:38px;}
    .fila-inferior{width:95%;}
    .fila-explicacion{width:95%;}
}