/*==================================================
TWITCH
==================================================*/

.twitch-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:start;

}

/*==================================================
PANELES
==================================================*/

.panel{

    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:18px;
    padding:22px;
    backdrop-filter:blur(8px);

}

.panel h3{

    margin:0 0 18px;
    color:#fff;
    font-family:Orbitron,sans-serif;
    letter-spacing:2px;

}

/*==================================================
DIRECTO
==================================================*/

#live-player{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    min-height:260px;

    overflow:hidden;

    border-radius:14px;

    border:1px solid var(--border);

    background:#111 url("/assets/img/twitch_offline.png") center center / cover no-repeat;

    margin-bottom:18px;

}

#live-player iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:none;

}

.live-data{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:20px;

}

.live-data div{

    display:flex;

    justify-content:space-between;

    gap:20px;

}

.status.online{

    color:#00ff88;

}

.status.offline{

    color:#ff4d4d;

}

/*==================================================
BOTÓN TWITCH
==================================================*/

.twitch-button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:46px;

    border-radius:10px;

    background:#6441A5;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.twitch-button:hover{

    background:#7a57bf;

}
/*==================================================
CLIPS
==================================================*/

#clip-player{

    position:relative;

    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:14px;

    border:1px solid var(--border);

    background:#111;

    margin-bottom:16px;

    transition:
        opacity .15s ease,
        box-shadow .25s ease;

}

#clip-player:hover{

    box-shadow:0 0 25px rgba(0,255,136,.18);

}

#clip-player iframe{

    width:100%;

    height:100%;

    border:none;

}

/*==================================================
FILTROS
==================================================*/

.filters-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6px;

    margin-bottom:16px;

}

.search-row{

    display:grid;

    grid-template-columns:1fr 38px;

    gap:6px;

    grid-column:1 / 3;

}

.search-row input,
.filters-grid input,
.filters-grid select{

    width:100%;

    height:34px;

    padding:0 10px;

    border-radius:10px;

    border:1px solid var(--border);

    background:#111;

    color:#fff;

    font-size:.82rem;

}

.search-row input:focus,
.filters-grid input:focus,
.filters-grid select:focus{

    outline:none;

    border-color:var(--green);

}

#clip-reset{

    width:38px;

    height:34px;

    padding:0;

    border-radius:10px;

    border:1px solid var(--border);

    background:#111;

    color:#fff;

    cursor:pointer;

    transition:.25s;

}

#clip-reset:hover{

    background:#1a1a1a;

    border-color:var(--green);

}
/*==================================================
INFORMACIÓN
==================================================*/

.clip-data{

    margin-top:8px;

}

.clip-data h4{

    margin:0 0 10px;

    color:#fff;

    font-size:1rem;

    line-height:1.35;

}

.clip-game{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--green);

    margin-bottom:10px;

}

.clip-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    color:#bdbdbd;

    font-size:.82rem;

}

.clip-meta div{

    display:flex;

    align-items:center;

    gap:5px;

}

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

.clip-controls-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    margin-top:20px;

}

.clip-controls{

    flex:1;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

}

.clip-controls button{

    height:44px;

    border-radius:10px;

    border:1px solid var(--border);

    background:#111;

    color:#fff;

    cursor:pointer;

    font-weight:600;

    transition:
        background .25s,
        border-color .25s,
        transform .20s;

}

.clip-controls button:hover{

    background:#1a1a1a;

    border-color:var(--green);

    transform:translateY(-2px);

}

#clip-random{

    background:var(--green);

    color:#000;

    border-color:var(--green);

    font-weight:700;

}

#clip-random:hover{

    filter:brightness(1.08);

}

#clip-counter{

    min-width:70px;

    text-align:right;

    color:var(--green);

    font-family:Orbitron,sans-serif;

    font-size:.82rem;

    font-weight:700;

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

@media (max-width:1000px){

    .twitch-grid{

        grid-template-columns:1fr;

    }

    .clip-controls-wrapper{

        flex-direction:column;

        align-items:stretch;

        gap:12px;

    }

    #clip-counter{

        text-align:center;

    }

}

@media (max-width:700px){

    .filters-grid{

        grid-template-columns:1fr;

    }

    .search-row{

        grid-column:auto;

        grid-template-columns:1fr 38px;

    }

    .clip-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

}

/*==================================================
DETALLES
==================================================*/

.panel{

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}

.panel:hover{

    border-color:rgba(0,255,136,.35);

    box-shadow:0 0 25px rgba(0,255,136,.08);

}

button,
input,
select{

    font-family:inherit;

}

input::placeholder{

    color:#8b8b8b;

}

select{

    cursor:pointer;

}

button{

    cursor:pointer;

}

iframe{

    display:block;

}