/*==========================
    MODAL VERSUS
==========================*/

.modal-versus{

    width:400px;
    height:289px;

    text-align:center;

    border-radius:20px;

}


/*==========================
        TITULO
==========================*/

.versus-title{

    font-family:'Fredoka',sans-serif;

    font-size:28px;

    font-weight:900;

    color:#fff;

    text-shadow:
    0 3px 0 #000,
    0 0 10px #ffb400;

    margin:0 auto 20px auto;

    width:91%;

    text-align:center;

}


/*==========================
      TARJETA MODO
==========================*/

.versus-card{
	font-family: 'Fredoka', sans-serif;
    width:70%;

    margin:auto;

    background:rgba(255,255,255,.15);

    border:2px solid rgba(255,255,255,.25);

    border-radius:18px;

    padding:15px;

    backdrop-filter:blur(4px);

    transition:.25s;

}

.versus-card:hover{

    transform:scale(1.03);

    border-color:#fff;

    box-shadow:0 0 18px rgba(255,213,74,.6);

}


/*==========================
      NOMBRE DEL MODO
==========================*/

.versus-mode{

    font-size:22px;

    font-weight:900;

    color:white;

    margin-bottom:6px;

    text-shadow:0 2px 4px #000;

}


/*==========================
      DESCRIPCION
==========================*/

.versus-description{

    color:#f2f2f2;

    font-size:13px;

    margin-bottom:15px;

}


/*==========================
        BOTON
==========================*/

.btn-versus{
	width: 85%;
    padding: 12px;
    margin-top: 12px;
    margin-bottom: 15px;
    border: none;
    border-radius: 10px;

    background: linear-gradient(
        180deg,
        #6cff6c 0%,
        #33d94f 45%,
        #1fa63b 100%
    );

    color: #ffffff;

    font-family: 'Fredoka', sans-serif;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;

    text-shadow: 0 2px 2px rgba(0,0,0,.35);

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.35),
        0 4px 0 #14782b,
        0 8px 14px rgba(0,0,0,.35);

    transition: all .2s ease;

}

.btn-versus:hover{

    transform:translateY(-2px);

}

.btn-versus:active{

    transform:translateY(2px);

    box-shadow:none;

}


/*==========================
        ESTADO
==========================*/

.versus-status{

    margin-top:15px;

    color:#ffe27b;

    font-size:12px;

    opacity:.85;

}
.versus-subtitle{

    color:white;

    font-size:15px;

    margin-bottom:25px;

}

.locked{

    opacity:.45;

}

.versus-card-title{

    font-family:'Fredoka';

    font-size:23px;

    color:white;

    margin-bottom:10px;

}

.versus-card-text{

    color:#d1d5db;

    font-size:14px;

    margin-bottom:18px;

}

.versus-btn{

    width:170px;

    height:45px;

    border:none;

    border-radius:12px;

    background:#10b981;

    color:white;

    font-weight:bold;

    cursor:pointer;

}

.versus-btn:hover{

    transform:scale(1.05);

}

.versus-close{

    width:170px;

    height:45px;

    border:none;

    border-radius:12px;

    background:#ef4444;

    color:white;

    cursor:pointer;

    font-weight:bold;

    margin-top:10px;

}

.versus-search-icon{

    font-size:70px;

    margin:25px 0;

    animation:pulseVS 1.2s infinite;

}

.versus-search-text{
	font-family: 'Fredoka', sans-serif;
    color:white;
    font-size:20px;
}

.versus-timer{

    margin:20px 0;

    font-size:30px;

    color:#fff;

    font-family:'Fredoka';

}

@keyframes pulseVS{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}


.vs-player{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin:8px 0;

}

.vs-avatar{

    width:55px;
    height:55px;

}

.vs-info{

    flex:1;
    margin-left:12px;
    text-align:left;

}

.vs-name{

    font-size:18px;
    font-weight:bold;
    color:#fff;
	display: flex;
    justify-content: center;

}

.vs-status{

    font-size:13px;
    color:#ddd;

}

.vs-ready{

    font-size:28px;

}

.vs-center{

    text-align:center;
    margin:15px 0;

}

.vs-text{

    font-size:30px;
    font-weight:bold;
    color:#ffd94d;

}

.vs-code{
    font-family: 'Fredoka', sans-serif;
    margin-top:15px;
    font-size:16px;
    font-weight:bold;
    text-align:center;
    color:#fff;

}
.vs-you{

    font-size:13px;

    color:#ffe36b;

    margin-left:5px;

    font-weight:normal;

}

.vs-name{

    align-items:center;

    gap:6px;

    font-size:18px;

    font-weight:bold;

}

.vs-badge{

    width:20px;

    height:20px;

    object-fit:contain;

}
.btn-cancelar-versus{
    background:#828282; 
	width: 85%;
    padding: 12px;
    margin-top: 12px;
    margin-bottom: 15px;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-family: 'Fredoka', sans-serif;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    text-shadow: 0 2px 2px rgba(0,0,0,.35);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 #212422, 0 8px 14px rgba(0, 0, 0, .35);
    transition: all .2s ease;
}

.btn-abandonar-sala{
	width: 85%;
    padding: 12px;
    margin-top: 12px;
    margin-bottom: 15px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(
        180deg,
        #ff7b7b 0%,
        #ff4d4d 45%,
        #d91f1f 100%
    );

    color: #ffffff;
    font-family: 'Fredoka', sans-serif;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    text-shadow: 0 2px 2px rgba(0,0,0,.35);
     box-shadow:
        inset 0 2px 0 rgba(255,255,255,.35),
        0 4px 0 #8b1212,
        0 8px 14px rgba(0,0,0,.35);

    transition: all .2s ease;
}

.btn-cancelar-versus:hover{

    background:#828282;

}
#modal_resultado_vs{

    display:none;

}

#modal_resultado_vs.active{

    display:flex;

}

.resultado-card{

    width:90%;
    max-width:420px;

    margin:auto;

    border-radius:18px;

    padding:25px;

    text-align:center;

    color:white;

}

.resultado-titulo{

    font-size:20px;

    font-weight:bold;

    margin-bottom:20px;

}

.resultado-score{

    font-size:15px;

    margin:10px 0;

}

.resultado-botones{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.tabla-usuarios-versus{
	position: fixed;
    top: 60px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    font-size: 18pt;
    color: #fff;
    font-family: 'PT Sans Narrow', sans-serif;
}
.versus-corazon{

    width:22px;
    height:22px;
    margin-right:6px;
    vertical-align:middle;

}



/*=====================================
        NUEVA SALA VERSUS
=====================================*/

.versus-room-card{
	font-family: 'Fredoka', sans-serif;
    width:92%;
    margin:auto;
    padding:0px 0px;

}

.vs-room-title{

    text-align:center;

    font-family:'Fredoka',sans-serif;

    font-size:28px;

    font-weight:900;

    color:#fff;

    margin-bottom:18px;

    text-shadow:
        0 3px 0 #000,
        0 0 10px #ffd54a;

}

.vs-room-players{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:start;

    width:100%;

}

.vs-column{

    flex:1;

    max-width:120px;

    text-align:center;

}

.vs-player-name{

    font-family:'Fredoka',sans-serif;

    font-size:18px;

    font-weight:bold;

    color:white;

    margin-bottom:10px;

}

/*=====================================
            AVATAR
=====================================*/

.vs-avatar-box{

    position:relative;

    width:78px;

    margin:auto;

}

.vs-avatar{

    width:78px;

    height:78px;

    border-radius:16px;

    border:3px solid rgba(255,255,255,.18);

}

.vs-level-badge{

    position:absolute;

    right:-6px;

    bottom:-6px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:#222;

    border:2px solid #ffd54a;

    color:#fff;

    font-size:14px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 2px 8px rgba(0,0,0,.45);

}

/*=====================================
            RANGO
=====================================*/

.vs-rank{

    margin-top:14px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

}

.vs-rank img{

    width:42px;

    height:42px;

    object-fit:contain;

}

.vs-rank-name{

    font-size:15px;

    color:white;

    font-weight:bold;

}

/*=====================================
            ESTADO
=====================================*/

.vs-state{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    padding:8px 8px;

    border-radius:30px;

    margin-top:14px;

    font-size:13px;

    font-weight:bold;
	margin-left: 5px;
}

.vs-state.ready{

    background:#28b44d;

    color:white;
	margin-left: 5px;
}

.vs-state.wait{

    background:#d39b17;

    color:white;
	margin-left: 5px;
}

/*=====================================
                VS
=====================================*/

.vs-big{

    width:90px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:'Fredoka',sans-serif;

    font-size:28px;

    font-weight:900;

    color:#fff;

    text-shadow:
        0 3px 0 #000,
        0 0 10px #ffb400;

}

/*=====================================
            CÓDIGO
=====================================*/

.vs-room-code{

    margin-top:10px;

    text-align:center;

}

.vs-room-code-title{

    color:#ddd;

    font-size:14px;

}

.vs-room-code-value{

    margin-top:5px;

    color:#fff;

    font-size:20px;

    font-weight:bold;

    letter-spacing:2px;

}

/*=====================================
            MENSAJE
=====================================*/

.vs-room-message{

    margin:18px auto;

    text-align:center;

    color:#cfd5df;

    font-size:12px;

}

/*=====================================
            BOTONES
=====================================*/

.vs-room-buttons{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:15px;

}
.resultado-modal{
	
	font-family:'Fredoka',sans-serif;

    width:min(96vw,820px);

    max-width:800px;

    height:auto;

    max-height:none;

    overflow:visible;

    padding:0;

    background:#111827;

    border:3px solid #2d3748;

    border-radius:18px;

}
.resultado-header{

    padding:18px;

    text-align:center;

    font-size:34px;

    font-weight:bold;

    color:white;

}
.resultado-header.victoria{

    background:linear-gradient(90deg,#198754,#2ecc71);
	border-radius: 18px;

}
.resultado-header.derrota{

    background:linear-gradient(90deg,#b91c1c,#ef4444);
	border-radius: 18px;

}
.resultado-header.empate{

    background:linear-gradient(90deg,#2563eb,#60a5fa);
	border-radius: 18px;

}
.resultado-body{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    align-items:start;

}
@media(max-width:900px){

.resultado-body{

    grid-template-columns:1fr 1fr;

    gap:14px;

}

}

@media(max-width:650px){

.resultado-body{

    grid-template-columns:1fr;

}

}
.resultado-section{

    background:#1f2937;

    border-radius:12px;

    padding:18px;

    /* margin-bottom:18px; */

}
.resultado-section-title{

    text-align:center;

    color:#ffd54f;

    font-size:20px;

    font-weight:bold;

}
.resultado-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}
.resultado-bar{

    width:100%;

    height:18px;

    background:#2d3748;

    border-radius:20px;

    overflow:hidden;

    margin-top:8px;

}
.resultado-bar-fill{

    height:100%;

    width:35%;

    background:linear-gradient(90deg,#00b4ff,#4fc3ff);

    border-radius:20px;

}
.resultado-lp{

    display:flex;

    align-items:center;

    gap:15px;

}
.resultado-rango{

    width:70px;

    height:70px;

    object-fit:contain;

}
.resultado-footer{

    /*padding:20px; */

    text-align:center;

}
.btn-continuar-vs{

    width:220px;

}