/* Estilos generales */
:root {
    --bg:#f8f9fc;
    --panel:rgba(111,111,111,0.2);
    --text:#1a1a1a;
    --accent:#44ee44;
    --correct:#44ee44;
    --error:#ff4444;
    --border:rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme:dark) {
    :root {
        --bg:#0f0f12;
        --panel:rgba(0,0,0,0.2);
        --text:#e0e0e0;
        --border:rgba(255, 255, 255, 0.1);
    }
}

a {
    font-weight: bold;
}

* {
    font-family:'Fira Code', monospace;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html, body { height:100%; }

body {
    background:radial-gradient(circle, #011335, #180118);
    color:#fff;
    line-height:1.618;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;

    /* body modes */
    &.zen-mode {
        .container { justify-content:flex-end; }
        .header h1 { font-size:1.3em; }
        .tagline, .description, .info, .end { display:none; }
        .player-container { position:relative; }
    }

    &.ficha-stream {
        #server_stats { display:block!important; }
    }

    &.ficha-sound {
        #current_sound { display:block!important; }
    }
}

.hidden { display:none!important; }

.small {
    margin-top:2rem;
    font-size:0.9rem;
    opacity:0.8;
}


a {
    color:#fff;
    text-decoration:none;
    &:hover { text-decoration:underline; }
}


/* contenedor de información principal */
.container {
    flex:1;
    padding:4vh 5vw;
    max-width:960px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;

    .header {
        h1 {
            font-size:2.4rem;
            font-weight:900;
            letter-spacing:0.3em;
            margin-bottom:0.2em;
            color:#fff;
        }

        .tagline {
            font-size:1rem;
            color:#fff;
            margin-bottom:3rem;
            opacity:0.9;
        }

    }


    section {
        &.description {
            font-size:1rem;
            font-style:italic;
            color:#fff;
        }

        &.info {
            padding:30px 0;
            display:flex;
            gap:10px;
            justify-content:center;
            align-content:flex-end;
            flex-wrap:wrap;
            align-items:stretch;

            a {
                color: var(--accent);
            }
            #current_sound, #server_stats {
                display:none;
                backdrop-filter:blur(4px);
                padding:9px;
                margin:3px;
                border:1px solid rgba(255,255,255, 0.3);
                border-radius:6px;
                ul {
                    list-style:none;
                    em {
                        font-style:normal;
                        font-size:0.8rem;
                        text-transform:uppercase;
                        font-weight:300;
                    }
                }
            }

            #current_sound {
                width:60%;
                background:rgba(0,0,0,0.4);
                transition:1s background-color ease-in-out;
            }
        }

        &.end { min-height:50px; }
    }
}

/* Hydra canvas */
#hydraCanvas {
    z-index:-1;
    width:100vw;
    height:100vh;
    position:absolute;
    image-rendering:pixelated;
    top:0;
    left:0;
}

/* body modes */
body {
    &.zen-mode {
        .container {
            justify-content:flex-end;
            padding:5px;
        }
        .header h1 { font-size:1.3em; }
        .tagline, .description, .info, .end { display:none; }
        .player-container { position:relative; }
    }

    &.ficha-stream {
        #server_stats { display:block; }
    }

    &.ficha-sound {
        #current_sound { display:block; }
    }
}


/* Responsive */
@media (max-width:640px) {
    .header h1 { font-size:2.6rem; }
    .container { padding:6vh 6vw; }
    .player { padding:10px; }
    #current_sound, #server_stats {
        width:100%;
    }
}