* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: #0e0e10;
    color: #e8e8ea;
    font-family:
        -apple-system,
        Segoe UI,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}
h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 28px;
}
label {
    display: block;
    font-size: 13px;
    color: #9a9aa2;
    margin: 0 0 6px;
}
input {
    width: 100%;
    padding: 14px;
    margin: 0 0 18px;
    font-size: 17px;
    background: #1c1c20;
    color: #e8e8ea;
    border: 2px solid #2e2e34;
    border-radius: 6px;
}
input:focus {
    outline: none;
    border-color: #4b8bf4;
}
button {
    width: 100%;
    padding: 15px;
    font-size: 17px;
    font-weight: 600;
    background: #4b8bf4;
    color: #fff;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}
button:focus {
    outline: none;
    border-color: #fff;
}
button.ghost {
    background: #1c1c20;
    color: #9a9aa2;
    font-weight: 400;
}

.wrap {
    max-width: 460px;
    margin: 0 auto;
    padding: 48px 20px;
}

.err {
    color: #ff6b6b;
    font-size: 14px;
    min-height: 20px;
    margin: 14px 0 0;
}

.hide {
    display: none;
}

#login {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#login.hide {
    display: none;
}

#login h1 {
    margin: 0;
}

/* Reproductor: pantalla completa, sense marges */
#player {
    padding: 0;
    max-width: none;
}
video {
    width: 100%;
    height: 100vh;
    background: #000;
    display: block;
}
/* La barra desapareix sola i torna amb qualsevol senyal de vida */
.bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: opacity 0.4s ease;
}

.bar .grup {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Separacio amb 'margin-left' i no amb 'gap': el 'gap' sobre flex es Chromium
   84 (2020) i aqui hi ha teles amb Chromium 56, on s'ignora en silenci i les
   dues coses queden enganxades. El marge fa exactament el mateix als tres
   casos, i el sap fer qualsevol navegador:
     - tots dos visibles      -> 40px entremig, com el gap
     - boto amagat (Smart TV) -> display:none, el marge no s'aplica
     - qualitat amagada       -> el marge es torna 0 a la media query de sota */
.bar .grup button {
    margin-left: 40px;
}

.bar button {
    width: auto;
    padding: 8px 16px;
    font-size: 14px;
}
.quality {
    color: #9a9aa2;
    font-size: 13px;
}
/* Amb el boto de pantalla completa hi ha quatre coses a la barra i a un mobil
   estret no hi caben. La qualitat es l'unica prescindible: es informacio meva,
   no de qui mira el partit. */
@media (max-width: 560px) {
    .quality {
        display: none;
    }
    /* Sense qualitat no hi ha de que separar-se: el marge deixaria el boto
       despenjat cap a la dreta. Amb 'gap' aixo passava sol. */
    .bar .grup button {
        margin-left: 0;
    }
}
.bar button.hide {
    display: none;
}
.bar.gone {
    opacity: 0;
    pointer-events: none;
}
body.idle {
    cursor: none;
}

/* Els navegadors bloquegen l'autoplay quan no hi ha hagut cap gest de
     l'usuari (p.e. en recuperar la sessio guardada). En comptes de deixar una
     pantalla negra, un boto ben gros al mig. */
.tap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.tapbtn {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: #4b8bf4;
    color: #fff;
    font-size: 56px;
    line-height: 132px;
    text-align: center;
}
/* Dues classes guanyen a una: sense aixo, el 'display: flex' de .tap tomba
     el 'display: none' de .hide, que esta definit abans. */
.tap.hide {
    display: none;
}

/* Offline.
   Mateix model que #login i #player: el panell es visible per defecte i el que
   l'amaga es la classe .hide. Abans anava al reves (display:none de base i
   .visible per ensenyar-lo), o sigui que .visible feia feina aqui i no feia
   res als altres dos panells. Funcionava, pero per tres motius diferents. */
#offline {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

/* Dues classes guanyen a una: sense aixo, el display:flex de #offline tomba
   el display:none de .hide. Mateix motiu que a #login.hide i .tap.hide. */
#offline.hide {
    display: none;
}

#offline .title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 14px;
}

#offline .message {
    font-size: 18px;
    line-height: 1.5;
    max-width: 30em;
    margin-bottom: 14px;
}

#offline .btn {
    width: auto;
    font-size: 22px;
    margin: 10px 0;
    padding: 14px 34px;
    border: 0;
    border-radius: 8px;
    background: #a50044;
    color: #fff;
    cursor: pointer;
}