* {
    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;
}
.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;
}

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


/* Reproductor: pantalla completa, sense marges */
#player {
    padding: 0;
    max-width: none;
}
video {
    width: 100%;
    height: 100vh;
    background: #000;
    display: block;
}
.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;
}
.bar button {
    width: auto;
    padding: 8px 16px;
    font-size: 14px;
}
.quality {
    color: #9a9aa2;
    font-size: 13px;
}

/* La barra desapareix sola i torna amb qualsevol senyal de vida */
.bar {
    transition: opacity 0.4s ease;
}
.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;
}