* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background: #02101d;
            overflow-x: hidden;
            color: #d4422f;
            min-height: 100vh;
            position: relative;
        }

        .container {
            width: 100%;
            max-width: 80%;
            margin: auto;
            padding: 20px;
            position: relative;
            z-index: 2;
        }

        /* Livegosta */
        .logo-area {
            display: flex;
            justify-content: center;
            margin-top: -4%;
            margin-block-end: -10%;
            min-height: 50%;
        }

        .logo-area img {
            width: 30%;
            max-width: 100%;

        }

        /* não sei oq eu to fazendo */
        .top-info {
            width: 80%;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #d4422f;
            font-size: 20px;
            margin-bottom: 1px;
        }

        .online {
            display: flex;
            align-items: center;
            gap: 0px;
        }

        .online::before {
            font-size: 0px;
        }

        /* player */
        #player {
            width: 80%;
            aspect-ratio: 16 / 9;
            margin: auto;
            background: #222;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
        }

         /* layout player + chat */
       	.main-content {
    width: 80%;
    margin: auto;

    display: flex;
    gap: 20px;

    max-height: 655px;
}

        /* player */
        #player {
    flex: 1;

    aspect-ratio: 16 / 9;

    background: #222;
    border-radius: 4px;
    overflow: hidden;

    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
        /* chat */
.chat-container {
    width: 30%;

    background: rgba(0,0,0,0.45);
    border-radius: 18px;

    display: flex;
    flex-direction: column;

    height: calc((43vw * 9 / 16));

    max-height: 50%;

    overflow: hidden;
}

        .chat-header {
            padding: 14px;
            background: rgba(255,255,255,0.05);
            border-bottom: 1px solid rgba(255,255,255,0.05);
            font-size: 18px;
            font-weight: bold;
        }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    overflow-x: hidden;

    word-break: break-word;
    overflow-wrap: anywhere;
}

        .chat-message {
            margin-bottom: 10px;
            color: white;
            font-size: 14px;
        }

        .chat-message strong {
            color: #d4422f;
        }

        .chat-input-nick-area {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px;
        }

        .chat-input-nick-area input {
            background: rgba(255,255,255,0.08);
            border: none;
            color: white;
            padding: 10px;
            border-radius: 10px;
            outline: none;
        }

        .chat-input-area {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px;
            border-top: 1px solid rgba(255,255,255,0.05);
        }

        .chat-input-area input {
            background: rgba(255,255,255,0.08);
            border: none;
            color: white;
            padding: 10px;
            border-radius: 10px;
            outline: none;
        }

        .chat-input-area button {
            background: #d4422f;
            border: none;
            color: white;
            padding: 10px;
            border-radius: 10px;
            cursor: pointer;
        }

        @media (max-width: 900px) {
            .main-content {
                width: 95%;
                flex-direction: column;
            }

            .chat-container {
                width: 100%;
            }

            .chat-messages {
                height: 250px;
            }
        }

        /* não confundir com o player, é botão */
        .streams-wrapper {
            width: fit-content;
            max-width: 90%;
            margin: 25px auto 0 auto;
            background: rgba(0,0,0,0.45);
            padding: 18px 22px;
            border-radius: 18px;
            backdrop-filter: blur(5px);
        }

        .streams {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
        }

        .btn {
            background: transparent;
            border: 1px solid #d4422f;
            color: #d4422f;
            padding: 8px 18px;
            border-radius: 999px;
            cursor: pointer;
            transition: 0.25s;
            font-size: 15px;
        }

        .btn:hover {
            background: #d4422f;
            color: #fff;
        }

        .btn.active {
            background: #d4422f;
            color: white;
        }

        /* status */
        #status {
            text-align: center;
            margin-top: 15px;
            color: #d4422f;
            font-size: 18px;
        }

        .soundboard {
            position: fixed;
            left: 10px;
            top: 120px;

            display: flex;
            flex-direction: column;
            gap: 10px;

            z-index: 9999;
        }

        .soundboard button {

            width: 60px;
            height: 60px;

            border: 2px solid #ff3b1f;
            background: rgba(0,0,0,0.4);

            color: white;
            font-size: 24px;

            border-radius: 12px;
            cursor: pointer;

            transition: 0.2s;

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

	    white-space: nowrap
        }

        .soundboard button:hover {
            background: #ff3b1f;
        }

        /* ondas */
        .waves {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 0;
            pointer-events: none;
        }

        .wave {
            position: absolute;
            width: 200%;
            height: 250px;
            border-radius: 43%;
            opacity: 0.25;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .wave1 {
            background: #0d3550;
            bottom: -40px;
            left: -20%;
            animation: wave 5s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .wave2 {
            background: #11496d;
            bottom: -95px;
            left: -30%;
            animation: wave 7s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .wave3 {
            background: #1b628f;
            bottom: -160px;
            left: -25%;
            animation: wave 10s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes wave {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-25%);
            }
        }

        /* tentativa de manter responsivo n° 12152153416543 */
        @media (max-width: 900px) {

            #player,
            .top-info {
                width: 95%;
            }

            .top-info {
                font-size: 16px;
            }

            .logo-area img {
                width: 140px;
            }

            .btn {
                font-size: 13px;
                padding: 7px 14px;
            }
        }