/* =====================================================
   MIANISI.ES - MULTISTREAM
   CSS
===================================================== */


/* =====================================================
   RESET
===================================================== */

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


/* =====================================================
   HTML / BODY
===================================================== */

html,
body {
    min-height: 100%;
}


body {

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

    color: white;

    background:

        radial-gradient(
            circle at top left,
            rgba(0,255,255,.25),
            transparent 40%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(255,0,200,.25),
            transparent 50%
        ),

        linear-gradient(
            135deg,
            #0b0b1a,
            #1a0033
        );

    overflow-x: hidden;
}


#multistream-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-top: 10px;
    line-height: 1.2;
}

#multistream-title span {
    display: block;
    font-size: 0.65em;
    margin-top: 8px;
    opacity: 0.85;
}

/* =====================================================
   GRID ANIMADO
===================================================== */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    animation:
        moveGrid 12s linear infinite;

    pointer-events: none;

    z-index: 0;
}


@keyframes moveGrid {

    from {
        transform: translate(0,0);
    }

    to {
        transform: translate(-45px,-45px);
    }

}


/* =====================================================
   LOGO SUPERIOR
===================================================== */

.logo-float {

    position: fixed;

    top: 5px;
    left: 5px;

    z-index: 999;
}


.logo-float img {

    width: 140px;
    height: auto;

    filter:

        drop-shadow(
            0 0 12px
            rgba(255,0,200,.7)
        )

        drop-shadow(
            0 0 25px
            rgba(255,0,80,.5)
        );

    transition: .3s ease;
}


.logo-float img:hover {

    transform:
        scale(1.08)
        rotate(-2deg);
}


/* =====================================================
   EPIC GAMES
===================================================== */

.epic-float {

    position: fixed;

    top: 17px;
    right: 9px;

    z-index: 999;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    padding: 16px 18px;

    border-radius: 18px;

    background:
        rgba(0,0,0,.35);

    border:
        1px solid
        rgba(255,255,255,.12);

    backdrop-filter:
        blur(8px);

    text-align: center;

    min-width: 160px;

    cursor: pointer;

    animation:
        epicGlow 2.5s ease-in-out infinite;
}


@keyframes epicGlow {

    0%,
    100% {

        box-shadow:

            0 0 10px
            rgba(0,140,255,.4),

            0 0 25px
            rgba(0,140,255,.2);
    }

    50% {

        box-shadow:

            0 0 18px
            rgba(0,200,255,.8),

            0 0 40px
            rgba(0,140,255,.5),

            0 0 70px
            rgba(0,80,255,.3);
    }

}


.epic-float img {

    width: 42px;
    height: 42px;

    filter:
        brightness(0)
        invert(1)
        drop-shadow(
            0 0 8px
            rgba(0,240,255,.6)
        );
}


.epic-title {

    font-size: .9rem;

    font-weight: 800;

    letter-spacing: 1px;
}


.epic-code {

    font-size: .85rem;

    opacity: .85;
}


.epic-code span {

    color: #00f0ff;

    font-weight: 800;
}


/* =====================================================
   MAIN
===================================================== */

main {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1800px;

    margin: auto;

    padding:
        145px
        20px
        30px;
}


/* =====================================================
   HERO
===================================================== */

.hero {

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-bottom: 25px;
}


.hero-logo {

    width: min(65%,450px);

    height: auto;

    filter:

        drop-shadow(
            0 0 12px
            rgba(255,0,200,.7)
        )

        drop-shadow(
            0 0 35px
            rgba(140,0,255,.5)
        );

    animation:
        logoFloat 4s ease-in-out infinite;
}


@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


.hero h1 {

    font-size:
        clamp(
            1.6rem,
            4vw,
            2.8rem
        );

    background:
        linear-gradient(
            90deg,
            #00f0ff,
            #ff00cc,
            #ffcc00
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    margin-top: 5px;
}


.hero p {

    margin-top: 8px;

    opacity: .75;

    font-size: .8rem;

    max-width: 850px;

    line-height: 1.7;
}


/* =====================================================
   BOTÓN VOLVER
===================================================== */

.home-button-wrapper {

    display: flex;

    justify-content: center;

    margin:
        15px
        auto
        30px;
}


.home-button {

    display: inline-block;

    padding:
        13px
        28px;

    border-radius: 40px;

    text-decoration: none;

    color: #fff;

    font-weight: 700;

    letter-spacing: .5px;

    font-size: .75rem;

    background:
        linear-gradient(
            90deg,
            #00f0ff,
            #ff00cc
        );

    box-shadow:

        0 0 15px
        rgba(0,240,255,.35),

        0 0 30px
        rgba(255,0,200,.35);

    transition: .3s ease;
}


.home-button:hover {

    transform:
        translateY(-4px)
        scale(1.05);

    box-shadow:

        0 0 20px #00f0ff,
        0 0 45px #ff00cc;
}


/* =====================================================
   STREAM + CHAT
===================================================== */

.stream-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto 22px;
    padding: 15px;

    border-radius: 22px;

    background: rgba(0,0,0,.30);

    border: 1px solid rgba(255,255,255,.10);

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 25px rgba(0,255,255,.10),
        0 0 45px rgba(255,0,200,.08);
}


/* =====================================================
   STREAM
===================================================== */

.stream-card {

    min-width: 0;

    overflow: hidden;

    border-radius: 16px;

    background: #000;

    border:
        1px solid
        rgba(255,255,255,.10);
}


.stream-header {

    height: 48px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        0
        15px;

    background:
        rgba(10,10,15,.95);

    font-size: .8rem;

    font-weight: 700;
}


.stream-header h2 {

    font-size: .8rem;
}


.stream-dot {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    flex-shrink: 0;
}


.twitch-dot {

    background: #9146ff;

    box-shadow:
        0 0 12px #9146ff;
}


.kick-dot {

    background: #53ff1a;

    box-shadow:
        0 0 12px #53ff1a;
}


.muted {

    margin-left: auto;

    font-size: .65rem;

    opacity: .65;
}


/* =====================================================
   VIDEO
===================================================== */

.video-wrapper {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #000;
}


.video-wrapper iframe {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: none;

    display: block;
}


/* =====================================================
   CHAT
===================================================== */

.chat-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border-radius: 16px;

    background: #000;

    border:
        1px solid
        rgba(255,255,255,.10);
}


.chat-header {

    height: 48px;

    min-height: 48px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        0
        15px;

    background:
        rgba(10,10,15,.95);

    font-size: .75rem;

    font-weight: 700;
}


.chat-header h2 {

    font-size: .75rem;
}


.chat-dot {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    flex-shrink: 0;
}


.chat-twitch-dot {

    background: #9146ff;

    box-shadow:
        0 0 12px #9146ff;
}


.chat-kick-dot {

    background: #53ff1a;

    box-shadow:
        0 0 12px #53ff1a;
}


.open-chat {

    margin-left: auto;

    color: #53ff1a;

    text-decoration: none;

    font-size: .6rem;

    opacity: .75;

    transition: .2s;
}


.open-chat:hover {

    opacity: 1;

    text-shadow:
        0 0 8px #53ff1a;
}


/* =====================================================
   CHAT CONTENEDOR
===================================================== */

.chat-container {

    width: 100%;

    height: 100%;

    min-height: 0;

    flex: 1;

    background: #000;
}


.chat-container iframe {

    width: 100%;

    height: 100%;

    min-height: 0;

    border: none;

    display: block;
}


/* =====================================================
   IGUALAR CHAT
===================================================== */

.stream-section .chat-card {

    height: 100%;
}


.stream-section .chat-container {

    min-height: 0;
}


/* =====================================================
   INFORMACIÓN SEO
===================================================== */

.seo-info {

    max-width: 1100px;

    margin:
        40px
        auto
        30px;

    padding:
        25px
        30px;

    border-radius: 20px;

    background:
        rgba(0,0,0,.28);

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

    backdrop-filter:
        blur(8px);

    text-align: center;

    line-height: 1.8;
}


.seo-info h2 {

    margin-bottom: 15px;

    font-size:
        clamp(
            1rem,
            2vw,
            1.4rem
        );

    background:
        linear-gradient(
            90deg,
            #00f0ff,
            #ff00cc
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


.seo-info p {

    margin-bottom: 12px;

    font-size: .78rem;

    opacity: .75;
}


.seo-info a {

    color: #00f0ff;

    text-decoration: none;

    font-weight: 700;
}


.seo-info a:hover {

    color: #fff;

    text-shadow:
        0 0 10px #00f0ff;
}


/* =====================================================
   NAVEGACIÓN INTERNA
===================================================== */

.site-navigation {

    text-align: center;

    margin:
        30px
        auto
        10px;
}


.site-navigation h2 {

    margin-bottom: 18px;

    font-size:
        clamp(
            1rem,
            2vw,
            1.4rem
        );
}


.navigation-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;
}


/* =====================================================
   FOOTER
===================================================== */

footer {

    position: relative;

    z-index: 1;

    text-align: center;

    margin-top: 35px;

    padding-bottom: 20px;

    opacity: .6;

    font-size: .75rem;
}


footer a {

    color: #00f0ff;

    text-decoration: none;
}


footer a:hover {

    color: #fff;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width:1100px) {

    .stream-section {

        grid-template-columns:
            minmax(0,1fr)
            300px;
    }

}
/* =====================================================
   MÓVIL
===================================================== */

@media (max-width:800px) {

    /* -------------------------------------------------
       EPIC GAMES
    ------------------------------------------------- */

    .epic-float {
        position: fixed;

        top: 0;
        left: 0;
        right: 0;

        flex-direction: row;

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

        gap: 10px;

        padding: 8px 10px;

        border-radius:
            0
            0
            14px
            14px;

        min-width: unset;
    }


    .epic-float img {
        width: 22px;
        height: 22px;
    }


    .epic-title,
    .epic-code {
        font-size: .6rem;

        white-space: nowrap;
    }


    /* -------------------------------------------------
       LOGO
    ------------------------------------------------- */

    .logo-float {
        top: 38px;
        left: 1px;
    }


    .logo-float img {
        width: 62px;
    }


    /* -------------------------------------------------
       MAIN
    ------------------------------------------------- */

    main {
        position: relative;

        z-index: 1;

        width: 100%;

        max-width: 1700px;

        margin: 0 auto;

        padding:
            145px
            20px
            30px;
    }


    /* -------------------------------------------------
       HERO
    ------------------------------------------------- */

    .hero-logo {
        width: 70%;
    }


    .hero h1 {
        font-size: 1.5rem;
    }


    .hero p {
        font-size: .7rem;
    }


    /* -------------------------------------------------
       STREAM SECTION
    ------------------------------------------------- */

    .stream-section {

        display: flex !important;

        flex-direction: column !important;

        width: 100%;

        height: auto !important;

        min-height: 0 !important;

        gap: 12px;

        padding: 10px;

        border-radius: 18px;
    }


    /* -------------------------------------------------
       STREAM / VÍDEO
    ------------------------------------------------- */

    .stream-card {

        width: 100%;

        height: auto !important;

        min-height: 0 !important;

        flex: none;
    }


    .video-wrapper {

        width: 100%;

        aspect-ratio: 16 / 9;

        height: auto;
    }


    /* -------------------------------------------------
       CHAT
    ------------------------------------------------- */

    .chat-card {

        display: flex !important;

        flex-direction: column !important;

        width: 100%;

        height: 550px !important;

        min-height: 550px !important;

        max-height: none !important;

        flex: none !important;

        overflow: hidden;
    }


    .chat-header {

        flex: 0 0 48px;

        height: 48px;

        min-height: 48px;
    }


    .chat-container {

        width: 100%;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        flex: 1 1 auto !important;

        overflow: hidden;
    }


    .chat-container iframe {

        display: block;

        width: 100%;

        height: 100% !important;

        min-height: 0 !important;

        border: none;
    }


    /* -------------------------------------------------
       SEO
    ------------------------------------------------- */

    .seo-info {

        padding:
            20px
            15px;

        margin-top: 30px;
    }


    .seo-info p {

        font-size: .7rem;
    }


    /* -------------------------------------------------
       BOTONES
    ------------------------------------------------- */

    .navigation-buttons {

        flex-direction: column;
    }


    .navigation-buttons .home-button {

        width: min(100%, 300px);

        text-align: center;
    }

}


/* =====================================================
   MÓVIL PEQUEÑO
===================================================== */

@media (max-width:500px) {

    /* -------------------------------------------------
       HERO
    ------------------------------------------------- */

    .hero-logo {
        width: 80%;
    }


    .hero h1 {
        font-size: 1.25rem;
    }


    .hero p {
        font-size: .65rem;
    }


    /* -------------------------------------------------
       CHAT
       Mantenemos 900px de altura
    ------------------------------------------------- */

    .chat-card {

        height: 550px !important;

        min-height: 550px !important;

        max-height: none !important;
    }


    .chat-container {

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        flex: 1 1 auto !important;
    }


    .chat-container iframe {

        height: 100% !important;

        min-height: 0 !important;
    }


    /* -------------------------------------------------
       SEO
    ------------------------------------------------- */

    .seo-info {

        border-radius: 15px;
    }

}