/* ==========================================================================
   AETHERLISM LIVE PLAYER
   ENGINE GLASS SYSTEM
   ========================================================================== */


.stream-test-container {

    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:30px 0 50px;

}



/* HEADER */

.stream-header {

    width:min(1200px,95%);

    padding:18px 25px;

    box-sizing:border-box;


    background:
    rgba(var(--brand-primary-rgb),0.85);


    color:#fff;


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

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:2rem;

    text-align:center;


    border-left:8px solid rgba(255,255,255,.25);

}




/* PLAYER KERN */

.player-glass {

    width:min(1200px,95%);

    margin-top:20px;

    padding:20px;


    box-sizing:border-box;


    background:

    rgba(var(--glass-tint-rgb),0.14);


    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);


    border:

    1px solid

    rgba(var(--glass-tint-rgb),0.25);



    /*
       Schatten nur hier:
       Das Objekt schwebt.
       Die Seite selbst bleibt ruhig.
    */

    box-shadow:

    0 18px 45px rgba(0,0,0,.22);



}




/* VIDEO */

#live-player {


    display:block;


    width:100%;


    aspect-ratio:16 / 9;


    background:#000;


    object-fit:contain;


    border:

    1px solid

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



}




/* STATUS */

.stream-status {


    margin-top:15px;


    padding:14px 18px;


    width:100%;


    box-sizing:border-box;


    background:

    rgba(var(--brand-primary-rgb),.35);



    color:#fff;


    font-family:'Roboto Mono',monospace;


    letter-spacing:1px;

    font-size:.9rem;


    border-left:

    5px solid

    rgba(255,255,255,.4);



}



/* BUTTON */

#stream-toggle {


    margin-top:20px;


    padding:14px 45px;


    background:

    rgba(var(--glass-tint-rgb),.18);


    color:#fff;


    border:

    1px solid

    rgba(var(--glass-tint-rgb),.35);



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


    font-size:1.1rem;


    text-transform:uppercase;


    letter-spacing:1px;


    cursor:pointer;



    transition:

    .25s ease;



}



#stream-toggle:hover {


    background:

    var(--brand-primary);


    letter-spacing:2px;


}



/* SYSTEM FOOTER */

.system-divider {


    width:min(1200px,95%);


    margin-top:30px;


    padding-top:15px;


    border-top:

    1px solid

    rgba(var(--glass-tint-rgb),.15);



    opacity:.55;


    font-family:'Roboto Mono',monospace;

    text-align:center;


}