* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;

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

    background:
        linear-gradient(
            rgba(0, 0, 0, .55),
            rgba(0, 0, 0, .55)
        ),
        url("https://img.magnific.com/free-photo/cozy-morning-stretch-cute-cat-pink-blanket_23-2152029023.jpg?semt=ais_hybrid&w=740&q=80");

    background-size: cover;
    background-position: center;

    font-family: Arial, sans-serif;
}

.container {
    width: min(95vw, 1200px);

    padding: 10px;

    background: rgba(255, 255, 255, .08);

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

    border-radius: 25px;

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

    box-shadow:
        0 20px 80px rgba(0, 0, 0, .6);
}


/* =========================
   Видео
   ========================= */

.video-box {
    width: 100%;
    aspect-ratio: 16 / 9;
}

#player {
    visibility: visible;
}

.plyr {
    width: 100%;
    height: 100%;

    border-radius: 18px;
    overflow: hidden;

    position: relative;
}

.plyr,
.plyr video {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.plyr__poster {
    user-select: none;
    -webkit-user-select: none;

    transform: scale(1.03);

    -webkit-user-drag: none;
}


/* =========================
   Онлайн-пользователи
   ========================= */

.online {
    margin-top: 12px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}

#name {
    width: 100%;

    padding: 10px 14px;

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

    outline: none;

    background: rgba(255, 255, 255, .08);

    color: white;

    font-size: 14px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#name::placeholder {
    color: rgba(255, 255, 255, .5);
}

#name:focus {
    border-color: rgba(255, 255, 255, .3);
}

#online-users {
    display: flex;
    flex-direction: column;

    gap: 6px;

    padding: 0 4px;
}


/* =========================
   Пользователь
   ========================= */

.online-user {
    display: flex;
    align-items: center;

    min-height: 28px;

    gap: 8px;

    color: rgba(255, 255, 255, .85);

    font-size: 14px;
}


/* =========================
   Индикатор онлайн
   ========================= */

.online-dot {
    width: 8px;
    height: 8px;

    min-width: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #35d45b;

    box-shadow:
        0 0 7px rgba(53, 212, 91, .7);

    transition:
        background-color .2s ease,
        box-shadow .2s ease;
}


/*
 * Пользователь только что
 * выполнил Play / Pause / Seek.
 */
.online-dot-paused {
    background: #ff9f0a;

    box-shadow:
        0 0 9px rgba(255, 159, 10, .8);
}


/* =========================
   Имя пользователя
   ========================= */

.online-user-name {
    min-width: 0;

    padding: 4px 8px;

    border-radius: 7px;

    background: rgba(255, 255, 255, .07);

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

    color: rgba(255, 255, 255, .85);

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* =========================
   Таймкод + буфер
   ========================= */

.online-user-info {
    display: flex;
    align-items: center;

    gap: 10px;

    white-space: nowrap;
}

.online-user-time,
.online-user-buffer {
    padding: 4px 8px;

    border-radius: 7px;

    background: rgba(255, 255, 255, .07);

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

    color: rgba(255, 255, 255, .55);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 12px;

    font-variant-numeric: tabular-nums;

    white-space: nowrap;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* =========================
   Блокировка плеера
   ========================= */

.player-lock {
    position: absolute;

    inset: 0;

    z-index: 1000;

    display: flex;

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

    background: rgba(255, 255, 255, .08);

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

    border-radius: 18px;

    color: rgba(255, 255, 255, .9);

    user-select: none;
    -webkit-user-select: none;
}

.player-lock-message {
    padding: 10px 18px;

    border-radius: 12px;

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

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* =========================
   Мобильные устройства
   ========================= */

@media (max-width: 600px) {

    body {
        padding: 10px;

        background:
            linear-gradient(
                rgba(0, 0, 0, .55),
                rgba(0, 0, 0, .55)
            ),
            url("https://i.pinimg.com/originals/47/87/41/478741b46adba9b9a52a702687619b2f.jpg");

        background-size: cover;
        background-position: center;
    }

    .container {
        width: 100%;

        padding: 12px;

        border-radius: 18px;
    }

    .video-box {
        aspect-ratio: 16 / 9;
    }

    .plyr__controls {
        padding: 8px;

        flex-wrap: wrap;
    }

    .plyr__volume,
    .plyr__time {
        display: none;
    }

    .online-user-info {
        gap: 5px;
    }

    .online-user-time,
    .online-user-buffer {
        padding: 4px 6px;

        font-size: 11px;
    }
}