* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    background: #02070c;
    color: #e9eef5;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

#loginScreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, #102033 0%, #050a10 55%, #010305 100%);
}

.login-box {
    width: 340px;
    padding: 28px;
    border: 1px solid #c58b00;
    border-radius: 10px;
    background: linear-gradient(180deg, #0b1622, #05090e);
    box-shadow: 0 0 25px #000;
    text-align: center;
}

.login-box h1 {
    margin: 0 0 8px;
    color: #fff;
}

.login-box p {
    margin: 0 0 20px;
    color: #8fa3b6;
}

.login-box input {
    width: 100%;
    height: 42px;
    margin-bottom: 12px;
    padding: 0 12px;
    border: 1px solid #3a4c5e;
    border-radius: 5px;
    outline: none;
    background: #050a0f;
    color: #fff;
}

.login-box input:focus {
    border-color: #d69b00;
}

#loginBtn {
    width: 100%;
    height: 42px;
    border: 1px solid #d69b00;
    border-radius: 5px;
    background: linear-gradient(180deg, #172a9b, #090b63);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

#loginError {
    min-height: 20px;
    margin-top: 10px;
    color: #ff6666;
}

#mainApp {
    display: none;
    width: 100vw;
    height: 100vh;
}

.topbar {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: 1px solid #b87900;
    background: linear-gradient(180deg, #091724, #03080d);
}

.brand {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-actions button {
    height: 29px;
    padding: 0 11px;
    border: 1px solid #2d4254;
    border-radius: 4px;
    background: #091726;
    color: #fff;
    cursor: pointer;
}

#myUsernameTop {
    color: #4edcff;
    font-weight: bold;
}

.layout {
    height: calc(100vh - 45px);
    display: grid;
    grid-template-columns: 215px minmax(500px, 1fr) 270px;
    gap: 5px;
    padding: 5px;
}

.left {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(260px, 1fr) 295px;
    gap: 5px;
}

.center,
.right {
    min-width: 0;
    min-height: 0;
}

.panel {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #b27a00;
    border-radius: 6px;
    background: #03080d;
}

.panel-title {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-bottom: 1px solid #a46f00;
    background: linear-gradient(180deg, #1629b7, #090a67);
    color: #fff;
    font-weight: bold;
}

.rooms-panel {
    display: flex;
    flex-direction: column;
}

#roomList {
    flex: 1;
    overflow-y: auto;
}

.room-item {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 7px;
    border-bottom: 1px solid #604915;
    background: linear-gradient(180deg, #1d2227, #111519);
    color: #cfcfcf;
    cursor: pointer;
    font-weight: bold;
}

.room-item:hover {
    color: #fff;
    background: #232b32;
}

.room-item.active {
    color: #00ff59;
    background: linear-gradient(180deg, #223323, #122216);
    box-shadow: inset 0 0 0 1px #00b743;
}

.room-count {
    min-width: 35px;
    padding: 2px 5px;
    border: 1px solid #777;
    border-radius: 11px;
    text-align: center;
    font-size: 11px;
}

.room-item.active .room-count {
    border-color: #00dd52;
}

.camera-panel {
    display: flex;
    flex-direction: column;
}

.camera-user {
    min-height: 35px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-bottom: 1px solid #58430f;
    color: #ffc41b;
    font-weight: bold;
}

.camera-box {
    position: relative;
    flex: 1;
    min-height: 140px;
    background:
        radial-gradient(circle at center, #19232d, #020509 72%);
}

#localVideo {
    width: 100%;
    height: 100%;
    display: none;
    object-fit: cover;
}

#cameraPlaceholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #8190a0;
    font-size: 13px;
}

#cameraPlaceholder:first-line {
    font-size: 42px;
}

.media-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 5px;
    border-top: 1px solid #58430f;
}

.media-row button {
    height: 31px;
    border: 1px solid #35516b;
    border-radius: 4px;
    background: #091724;
    color: #fff;
    cursor: pointer;
}

.media-row button.active {
    border-color: #00e760;
    color: #00ff67;
}

.volume-row {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-top: 1px solid #58430f;
    color: #ffb800;
}

.volume-row input {
    flex: 1;
}

.chat-panel {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 33px 1fr 40px 47px;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    border-bottom: 1px solid #b27a00;
    background: linear-gradient(180deg, #11171d, #080c10);
    font-weight: bold;
}

.chat-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

#onlineCounter {
    color: #69b8de;
    font-size: 11px;
}

#clearHistoryBtn {
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    background: #090a70;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
}

#messages {
    min-height: 0;
    margin: 0;
    padding: 7px;
    overflow-y: auto;
    list-style: none;
    background:
        radial-gradient(circle at 50% 78%, rgba(45,55,65,.22), transparent 30%),
        #010509;
}

#messages li {
    margin-bottom: 4px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(45,36,13,.62);
    word-break: break-word;
}

.system-message {
    color: #d7d7d7;
    font-style: italic;
}

.message-user {
    margin-right: 5px;
    color: #48dfff;
    font-weight: bold;
}

.message-user.superadmin {
    color: #ffc400;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    overflow-x: auto;
    border-top: 1px solid #b27a00;
    border-bottom: 1px solid #b27a00;
    background: #05090d;
    white-space: nowrap;
}

.toolbar span,
.toolbar label {
    color: #ffac00;
    font-size: 11px;
}

.toolbar button,
.toolbar select {
    height: 27px;
    border: 1px solid #594816;
    border-radius: 4px;
    background: #10161c;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
}

.toolbar button {
    padding: 0 8px;
}

#form {
    display: grid;
    grid-template-columns: 1fr 125px;
    gap: 6px;
    padding: 5px;
    background: #04080b;
}

#input {
    min-width: 0;
    padding: 0 10px;
    border: 1px solid #d3ad00;
    border-radius: 5px;
    outline: none;
    background: #05090c;
    color: #fff;
}

#form button {
    border: 1px solid #1e32a8;
    border-radius: 5px;
    background: linear-gradient(180deg, #1827a7, #090865);
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}

.users-panel {
    height: 100%;
    display: grid;
    grid-template-rows: 33px 30px 1fr auto;
}

.tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.tab {
    padding: 0 3px;
    border: 0;
    border-right: 1px solid #304152;
    background: #090a6e;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
}

.tab.active {
    background: #ee6c00;
}

#usersListUI {
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.user-item {
    min-height: 35px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-bottom: 1px solid #27333d;
    background: linear-gradient(180deg, #171d22, #0d1216);
}

.user-status {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #00dc5b;
    box-shadow: 0 0 5px #00dc5b;
}

.user-avatar {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 1px solid #a87900;
    border-radius: 50%;
    background: #101a24;
}

.user-name {
    overflow: hidden;
    color: #4ddfff;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-name.superadmin {
    color: #ffc400;
}

.users-help {
    padding: 7px;
    border-top: 1px solid #283847;
    color: #6d8192;
    font-size: 10px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #03070a;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #354450;
}

@media (max-width: 1000px) {
    .layout {
        grid-template-columns: 190px minmax(380px, 1fr) 220px;
    }
}

/* ===============================
   PRIVATE CHAT V4
================================ */

.private-chat-window {
    position: fixed;
    right: 285px;
    bottom: 55px;
    z-index: 5000;

    width: 360px;
    height: 420px;

    display: none;
    grid-template-rows: 38px 1fr 45px;

    overflow: hidden;

    border: 1px solid #d39400;
    border-radius: 7px;

    background: #02070b;

    box-shadow:
        0 0 20px rgba(0,0,0,.85),
        0 0 6px rgba(255,174,0,.25);
}

.private-chat-window.open {
    display: grid;
}

.private-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 10px;

    background:
        linear-gradient(180deg,#182db9,#080967);

    border-bottom: 1px solid #d39400;

    color: white;
    font-size: 13px;
}

#privateChatUser {
    color: #ffd000;
}

#privateChatClose {
    width: 28px;
    height: 27px;

    border: 0;
    border-radius: 4px;

    background: #08094f;
    color: white;

    cursor: pointer;
}

.private-messages {
    min-height: 0;

    padding: 8px;

    overflow-y: auto;

    background:
        radial-gradient(
            circle at center,
            #101820 0%,
            #020609 70%
        );
}

.private-message {
    margin-bottom: 6px;
    padding: 7px 8px;

    border: 1px solid #263746;
    border-radius: 5px;

    background: #0b1218;

    color: #eee;
}

.private-message.mine {
    border-color: #796000;
    background: #191606;
}

.private-message-name {
    margin-right: 5px;

    color: #48dfff;

    font-weight: bold;
}

.private-message.mine .private-message-name {
    color: #ffc400;
}

#privateForm {
    display: grid;
    grid-template-columns: 1fr 45px;

    gap: 5px;

    padding: 5px;

    border-top: 1px solid #b27a00;

    background: #05090d;
}

#privateInput {
    min-width: 0;

    padding: 0 9px;

    outline: none;

    border: 1px solid #d0a900;
    border-radius: 4px;

    background: #020609;
    color: white;
}

#privateForm button {
    border: 1px solid #293fc1;
    border-radius: 4px;

    background:
        linear-gradient(180deg,#1c31b6,#090969);

    color: white;

    cursor: pointer;
}

.user-item {
    cursor: pointer;
}

.user-item:hover {
    background: #17232c;
}

/* ===============================
   USER CONTEXT MENU
================================ */

.user-context-menu {
    position: fixed;
    z-index: 9000;
    display: none;
    width: 210px;
    overflow: hidden;
    border: 1px solid #c58a00;
    border-radius: 6px;
    background: #080d12;
    box-shadow: 0 0 20px rgba(0,0,0,.9);
}

.user-context-menu.open {
    display: block;
}

.context-user-title {
    padding: 8px 10px;
    border-bottom: 1px solid #9e7100;
    background: linear-gradient(180deg,#1729aa,#090a66);
    color: #ffd000;
    font-weight: bold;
}

.user-context-menu button {
    width: 100%;
    height: 33px;
    display: block;
    padding: 0 10px;
    border: 0;
    border-bottom: 1px solid #202c35;
    background: #0b1218;
    color: #e9eef5;
    text-align: left;
    cursor: pointer;
}

.user-context-menu button:hover {
    background: #17232d;
    color: #fff;
}

.context-separator {
    height: 1px;
    background: #9e7100;
}


/* Speaking Indicator Glow Effect */
.speaking {
    border: 3px solid #22c55e !important;
    box-shadow: 0 0 15px #22c55e !important;
    transition: all 0.2s ease;
}

/* Keep the voice indicator and equalizer without the green speaking frame */
.user-voice-wrap.speaking {
    border: none !important;
    box-shadow: none !important;
}


/* --- PareaClub V4 UI Overrides --- */
body, #mainApp {
    background-image: none !important; /* Αφαίρεση εικόνας από το γενικό φόντο */
    background-color: #0f172a !important; /* Καθαρό σκούρο χρώμα εκτός chat */
}

.chat-panel {
    /* Εγκλωβισμός εικόνας φόντου ΑΥΣΤΗΡΑ μέσα στο workspace */
    background-color: #1e293b;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Στοίχιση κειμένων αριστερά */
    text-align: left !important;
}

.chat-header, .users-help, #privateMessages, .private-chat-header, .chat-message {
    text-align: left !important;
}

/* --- Clean Natural Mobile View --- */
@media screen and (max-width: 1024px) {
    body {
        zoom: 1;
    }
}

/* --- PareaClub Final Mobile Scroll & Layout Fix --- */
@media screen and (max-width: 1024px) {
    html, body {
        width: 100% !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Διασφαλίζουμε ότι καμία μπάρα, γρανάζι ή χρήστης δεν κρύβεται */
    body {
        zoom: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* --- PareaClub Admin Panel Styles --- */
.admin-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.admin-container {
    width: 90vw;
    max-width: 1200px;
    height: 85vh;
    background-color: #0e1626;
    border-radius: 8px;
    border: 1px solid #1e293b;
    display: flex;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

.admin-sidebar {
    width: 280px;
    background-color: #0b111e;
    border-right: 1px solid #1e293b;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}

.admin-sidebar h3 {
    color: #38bdf8;
    font-size: 1.1rem;
    padding: 0 20px 15px 20px;
    margin: 0;
    border-bottom: 1px solid #1e293b;
}

.admin-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.admin-tab-btn {
    padding: 12px 20px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.admin-tab-btn:hover {
    background-color: #162032;
    color: #f8fafc;
}

.admin-tab-btn.active {
    background-color: #162032;
    color: #38bdf8;
    border-left-color: #38bdf8;
    font-weight: 600;
}

.admin-content {
    flex: 1;
    padding: 30px;
    color: #f8fafc;
    overflow-y: auto;
    position: relative;
    background-color: #0e1626;
}

.admin-close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.8rem;
    cursor: pointer;
    transition: color 0.2s;
}

.admin-close-btn:hover {
    color: #f8fafc;
}

.admin-content h2 {
    margin-top: 0;
    font-size: 1.5rem;
    color: #f8fafc;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 15px;
}

.admin-table-wrapper {
    margin-top: 20px;
    background: #0b111e;
    border: 1px solid #1e293b;
    border-radius: 6px;
    padding: 20px;
    color: #94a3b8;
}

/* ==========================================
   DRAGGABLE WINDOWS
========================================== */

.private-chat-header,
.private-header,
.video-header,
.camera-header,
.video-title,
.drag-handle {
    cursor: move;
    user-select: none;
}

#videoContainer,
#privateChatWindow,
.pareaclub-floating-window {
    touch-action: none;
}


/* ==========================================
   DRAGGABLE WINDOWS
========================================== */

.private-chat-header,
.private-header,
.video-header,
.camera-header,
.video-title,
.drag-handle {
    cursor: move;
    user-select: none;
}

#videoContainer,
#privateChatWindow,
.pareaclub-floating-window {
    touch-action: none;
}



/* ==========================================
   USER CAMERA / MIC STATUS
========================================== */

.user-media-icons {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.user-camera-icon {
    padding: 1px 3px;
    border: 0;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
}

.user-camera-icon:hover {
    transform: scale(1.15);
}

.user-mic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: .85;
}

.user-mic-icon.talking {
    background: #d40000;

    border-radius: 50%;
    padding: 2px;
    opacity: 1;
    animation: pareaclubTalkPulse .8s infinite alternate;
}

.user-mic-icon.local-muted { color: red !important; position: relative; }
.user-mic-icon.local-muted::after { content: ""; position: absolute; width: 3px; height: 1.25em; background: red; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); border-radius: 2px; pointer-events: none; }

@keyframes pareaclubTalkPulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.18);
    }
}



/* =========================================================
   PAREACLUB DJ PLAYER V1
========================================================= */

#openDjPlayerBtn {
    background: #161d2c;
    color: #fff;
    border: 1px solid #39455f;
    border-radius: 7px;
    padding: 8px 13px;
    cursor: pointer;
    font-weight: 700;
}

#openDjPlayerBtn:hover {
    background: #202b40;
}


.dj-player-window {
    position: fixed;
    width: 520px;
    max-height: 82vh;
    left: 50%;
    top: 90px;
    transform: translateX(-50%);
    z-index: 15000;

    background:
        linear-gradient(
            160deg,
            #151a24,
            #0e1118
        );

    border: 1px solid #364158;
    border-radius: 14px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.65);

    overflow: hidden;

    color: #f3f6ff;
}


.dj-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 13px 16px;

    font-size: 16px;
    font-weight: 800;

    background: #101520;
    border-bottom: 1px solid #2e3749;

    cursor: move;
    user-select: none;
}


.dj-live-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;

    background: #20d67b;
    border-radius: 50%;

    box-shadow:
        0 0 10px #20d67b;
}


.dj-close-btn {
    background: #b52b38;
    color: white;
    border: 0;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
}


.dj-now-playing {
    display: flex;
    gap: 13px;
    padding: 16px;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(58,72,104,.4),
            transparent
        );
}


.dj-cover {
    width: 66px;
    height: 66px;

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

    font-size: 31px;

    border-radius: 10px;
    background: #222b3d;
}


.dj-track-info {
    min-width: 0;
    flex: 1;
}


.dj-small-label {
    color: #858fa5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}


.dj-now-title {
    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    margin-top: 4px;
}


.dj-now-source {
    color: #99a5bb;
    font-size: 12px;
    margin-top: 4px;
}


.dj-youtube-player {
    width: 100%;
    height: 210px;
    background: #050608;
}


.dj-progress-row {
    display: flex;
    gap: 9px;
    align-items: center;

    padding: 10px 15px 4px;
    font-size: 11px;
}


#djProgress {
    flex: 1;
}


.dj-controls {
    display: flex;
    justify-content: center;
    gap: 9px;

    padding: 10px 15px;
}


.dj-controls button {
    width: 46px;
    height: 40px;

    border: 1px solid #3a465f;
    border-radius: 8px;

    background: #192235;
    color: white;

    cursor: pointer;
    font-size: 17px;
}


.dj-controls button:hover {
    background: #26334d;
}


.dj-controls .dj-main-button {
    background: #19a864;
    border-color: #19a864;

    width: 54px;
}


.dj-volume-row {
    display: flex;
    gap: 10px;
    align-items: center;

    padding: 3px 16px 13px;
}


#djVolume {
    flex: 1;
}


.dj-add-section {
    border-top: 1px solid #293143;
    border-bottom: 1px solid #293143;

    padding: 12px 15px;

    background: rgba(0,0,0,.12);
}


.dj-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #abb4c7;

    margin: 7px 0;
}


.dj-add-row {
    display: flex;
    gap: 8px;
}


.dj-add-row input {
    min-width: 0;
    flex: 1;

    padding: 9px;

    border-radius: 6px;
    border: 1px solid #39445a;

    background: #111724;
    color: #fff;
}


.dj-add-row button {
    border: 0;
    border-radius: 6px;

    padding: 8px 12px;

    background: #3078d4;
    color: white;

    cursor: pointer;
    font-weight: 700;
}


.dj-upload-status {
    font-size: 11px;
    min-height: 15px;

    margin-top: 5px;
    color: #83d8ab;
}


.dj-playlist-header {
    display: flex;
    justify-content: space-between;

    padding: 11px 15px;

    font-size: 12px;
    font-weight: 800;

    color: #acb6ca;
}


.dj-playlist {
    max-height: 230px;
    overflow-y: auto;
}


.dj-track {
    display: grid;

    grid-template-columns:
        35px minmax(0, 1fr) auto;

    gap: 8px;
    align-items: center;

    padding: 9px 13px;

    border-top: 1px solid #222a39;
}


.dj-track.active {
    background:
        rgba(37, 184, 110, .14);
}


.dj-track-number {
    color: #6f7c94;
    text-align: center;
}


.dj-track-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    cursor: pointer;
}


.dj-track-title:hover {
    color: #6fb6ff;
}


.dj-delete-track {
    background: transparent;
    border: 0;
    color: #e96975;
    cursor: pointer;

    font-size: 15px;
}


.dj-empty {
    color: #737e92;
    text-align: center;
    padding: 25px;
}


@media (max-width: 650px) {

    .dj-player-window {
        width: calc(100% - 16px);
        left: 8px;
        transform: none;
        top: 55px;
    }

    .dj-youtube-player {
        height: 180px;
    }
}



/* ==========================================
   DJ LOCK V2
========================================== */

#openDjPlayerBtn.dj-busy {
    opacity: .65;
    cursor: not-allowed;
}

.dj-player-header {
    touch-action: none;
}



/* =========================================================
   PAREACLUB DJ PLAYER RESPONSIVE V2
   Προσαρμογή σε desktop / tablet / mobile
========================================================= */

.dj-player-window {

    /*
     * Δεν είναι πλέον σταθερά 520px.
     *
     * min: 300px
     * ideal: 92vw
     * max: 540px
     */
    width: clamp(
        300px,
        92vw,
        540px
    );

    max-width: calc(100vw - 16px);

    max-height: calc(100vh - 20px);

    box-sizing: border-box;

    overflow: hidden;
}


/* Όλα τα εσωτερικά στοιχεία
   σέβονται το πλάτος του player */
.dj-player-window * {
    box-sizing: border-box;
}


/* HEADER */

.dj-player-header {

    padding:
        clamp(8px, 2vw, 13px)
        clamp(10px, 3vw, 16px);

    font-size:
        clamp(
            13px,
            3.5vw,
            16px
        );

    min-height:
        clamp(
            42px,
            11vw,
            56px
        );
}


.dj-close-btn {

    width:
        clamp(30px, 9vw, 38px);

    height:
        clamp(30px, 9vw, 38px);

    font-size:
        clamp(14px, 4vw, 18px);

    flex: 0 0 auto;
}


/* NOW PLAYING */

.dj-now-playing {

    padding:
        clamp(10px, 3vw, 18px);

    gap:
        clamp(8px, 3vw, 14px);
}


.dj-cover {

    width:
        clamp(52px, 16vw, 76px);

    height:
        clamp(52px, 16vw, 76px);

    min-width:
        clamp(52px, 16vw, 76px);

    font-size:
        clamp(24px, 8vw, 38px);
}


.dj-track-info {

    min-width: 0;

    flex: 1;
}


.dj-now-title {

    font-size:
        clamp(14px, 4vw, 19px);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.dj-small-label {

    font-size:
        clamp(9px, 2.5vw, 11px);
}


/* PLAYER / VIDEO AREA */

.dj-player-window iframe,
.dj-player-window video {

    width: 100% !important;

    max-width: 100% !important;

    display: block;
}


/* TIMELINE */

.dj-progress-row {

    width: 100%;

    padding:
        0
        clamp(10px, 3vw, 16px);

    gap:
        clamp(5px, 2vw, 10px);
}


.dj-progress-row input[type="range"] {

    min-width: 0;

    flex: 1;
}


.dj-time {

    font-size:
        clamp(9px, 2.4vw, 11px);

    white-space: nowrap;
}


/* ΚΟΥΜΠΙΑ PLAYER */

.dj-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: nowrap;

    gap:
        clamp(5px, 2vw, 10px);

    padding:
        clamp(8px, 2.5vw, 14px);
}


.dj-controls button {

    /*
     * Τα controls μικραίνουν μαζί
     * με το παράθυρο.
     */
    width:
        clamp(
            38px,
            11vw,
            54px
        );

    height:
        clamp(
            34px,
            10vw,
            42px
        );

    min-width: 0;

    padding: 0;

    font-size:
        clamp(
            12px,
            4vw,
            18px
        );

    flex: 0 1 auto;
}


/* VOLUME */

.dj-volume-row {

    display: flex;

    align-items: center;

    width: 100%;

    gap:
        clamp(6px, 2vw, 10px);

    padding:
        0
        clamp(10px, 3vw, 16px)
        clamp(10px, 3vw, 16px);
}


.dj-volume-row input[type="range"] {

    flex: 1;

    min-width: 0;
}


/* YOUTUBE / UPLOAD */

.dj-player-window input[type="text"],
.dj-player-window input[type="url"],
.dj-player-window input[type="file"] {

    min-width: 0;

    max-width: 100%;

    font-size:
        clamp(
            11px,
            3vw,
            14px
        );
}


.dj-youtube-row,
.dj-upload-row {

    display: flex;

    align-items: center;

    width: 100%;

    gap:
        clamp(6px, 2vw, 10px);
}


.dj-youtube-row input,
.dj-upload-row input {

    flex: 1;

    min-width: 0;
}


.dj-youtube-row button,
.dj-upload-row button {

    flex: 0 0 auto;

    white-space: nowrap;

    padding:
        clamp(7px, 2vw, 10px)
        clamp(8px, 3vw, 14px);

    font-size:
        clamp(
            11px,
            3vw,
            14px
        );
}


/* PLAYLIST */

.dj-playlist {

    overflow-y: auto;

    overflow-x: hidden;

    max-height:
        clamp(
            100px,
            24vh,
            260px
        );
}


/* =========================================================
   ΜΙΚΡΕΣ ΟΘΟΝΕΣ
========================================================= */

@media (max-width: 600px) {

    .dj-player-window {

        width: calc(100vw - 10px);

        max-width: none;

        top: 5px;

        left: 5px;

        transform: none;

        max-height: calc(100vh - 10px);

        border-radius: 10px;
    }


    .dj-controls {

        gap: 5px;
    }


    .dj-controls button {

        width: clamp(
            34px,
            15vw,
            46px
        );

        height: 36px;
    }


    /*
     * YouTube / upload:
     * σε πολύ μικρή οθόνη
     * επιτρέπουμε να σπάσουν
     * σε δεύτερη γραμμή.
     */
    .dj-youtube-row,
    .dj-upload-row {

        flex-wrap: wrap;
    }


    .dj-youtube-row input,
    .dj-upload-row input {

        flex-basis: 65%;
    }


    .dj-youtube-row button,
    .dj-upload-row button {

        flex-grow: 1;
    }
}


/* =========================================================
   ΠΟΛΥ ΜΙΚΡΕΣ ΟΘΟΝΕΣ
========================================================= */

@media (max-width: 380px) {

    .dj-player-header {

        font-size: 13px;
    }


    .dj-controls {

        padding-left: 5px;

        padding-right: 5px;
    }


    .dj-controls button {

        width: 34px;

        height: 34px;

        font-size: 13px;
    }


    .dj-now-playing {

        padding: 9px;
    }


    .dj-cover {

        width: 48px;

        height: 48px;

        min-width: 48px;
    }
}



/* =========================================================
   PAREACLUB DJ PLAYER - MANUAL RESIZE
========================================================= */

.dj-player-window {

    /*
     * Χειροκίνητο resize από κάτω δεξιά.
     */
    resize: both !important;

    overflow: auto !important;

    /*
     * Δεν επιτρέπουμε να γίνει υπερβολικά μικρό.
     */
    min-width: 330px !important;
    min-height: 480px !important;

    /*
     * Ούτε μεγαλύτερο από την οθόνη.
     */
    max-width: 95vw !important;
    max-height: 95vh !important;

    /*
     * Αρχικό μέγεθος.
     */
    width: 520px;

    container-type: inline-size;
}


/*
 * Το header παραμένει μόνο για μετακίνηση.
 */
.dj-player-header {
    cursor: move;
}


/* =========================================================
   ΟΤΑΝ ΜΙΚΡΑΙΝΕΙ ΧΕΙΡΟΚΙΝΗΤΑ ΤΟ ΠΑΡΑΘΥΡΟ
========================================================= */

@container (max-width: 450px) {

    .dj-player-header {
        font-size: 14px;
        padding: 9px 11px;
    }

    .dj-now-playing {
        padding: 10px;
        gap: 8px;
    }

    .dj-cover {
        width: 55px;
        height: 55px;
        min-width: 55px;
        font-size: 27px;
    }

    .dj-now-title {
        font-size: 15px;
    }

    .dj-controls {
        gap: 6px;
        padding: 8px;
    }

    .dj-controls button {
        width: 40px;
        height: 36px;
        font-size: 13px;
    }

    .dj-player-window input {
        font-size: 12px;
    }

    .dj-youtube-row button,
    .dj-upload-row button {
        font-size: 12px;
        padding: 7px 9px;
    }
}


/* Ακόμη μικρότερο DJ παράθυρο */

@container (max-width: 370px) {

    .dj-controls {
        gap: 4px;
    }

    .dj-controls button {
        width: 34px;
        height: 32px;
        font-size: 12px;
    }

    .dj-cover {
        width: 45px;
        height: 45px;
        min-width: 45px;
        font-size: 22px;
    }

    .dj-now-title {
        font-size: 13px;
    }

    .dj-small-label {
        font-size: 9px;
    }
}


/*
 * Μικρή ένδειξη κάτω δεξιά
 * ότι το παράθυρο αλλάζει μέγεθος.
 */
.dj-player-window::after {
    content: "◢";
    position: absolute;
    right: 3px;
    bottom: 1px;
    font-size: 17px;
    opacity: .65;
    pointer-events: none;
}



/* =========================================================
   PAREACLUB YOUTUBE SEARCH
========================================================= */

.dj-youtube-search-box {
    margin: 8px 0 14px;
}

.dj-search-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

#djYoutubeSearch {
    flex: 1;
    min-width: 0;
    background: #151c29;
    color: #f5f7ff;
    border: 1px solid #35415a;
    border-radius: 7px;
    padding: 10px 11px;
}

#djYoutubeSearchBtn {
    flex: 0 0 auto;
    background: #287be0;
    color: white;
    border: 0;
    border-radius: 7px;
    padding: 9px 12px;
    cursor: pointer;
    font-weight: 700;
}

.dj-search-status {
    min-height: 18px;
    margin-top: 7px;
    font-size: 12px;
    color: #aab5ca;
}

.dj-search-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
}

.dj-search-result {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px;
    background: #111824;
    border: 1px solid #2b3548;
    border-radius: 8px;
}

.dj-search-thumb {
    width: 78px;
    height: 44px;
    object-fit: cover;
    border-radius: 5px;
    flex: 0 0 auto;
}

.dj-search-info {
    flex: 1;
    min-width: 0;
}

.dj-search-title {
    color: #f3f6ff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dj-search-channel {
    margin-top: 3px;
    color: #8f9bb2;
    font-size: 11px;
}

.dj-search-add {
    flex: 0 0 auto;
    background: #1cab68;
    color: white;
    border: 0;
    border-radius: 6px;
    padding: 7px 9px;
    cursor: pointer;
    font-weight: 700;
}

.dj-search-add:disabled {
    opacity: .65;
    cursor: default;
}


/* Responsive */
@media (max-width: 480px) {

    .dj-search-row {
        flex-wrap: wrap;
    }

    #djYoutubeSearch {
        flex-basis: 100%;
    }

    #djYoutubeSearchBtn {
        width: 100%;
    }

    .dj-search-result {
        flex-wrap: wrap;
    }

    .dj-search-info {
        min-width: 150px;
    }

    .dj-search-add {
        margin-left: auto;
    }
}



/* =========================================================
   YOUTUBE SEARCH TOGGLE
========================================================= */

.dj-search-toggle-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;

    font-weight: 700;

    color: #d8e1f2;
}


#djYoutubeSearchToggle {

    width: 30px;

    height: 30px;

    border: 0;

    border-radius: 6px;

    background: #283247;

    color: white;

    cursor: pointer;

    font-size: 14px;
}


#djYoutubeSearchToggle:hover {

    background: #3b4965;
}


/* =========================================================
   PAREACLUB DJ PLAYER COMPACT LAYOUT
========================================================= */

/* Κρύβουμε μόνο την οπτική περιοχή του YouTube player */
#djYoutubePlayer,
.dj-youtube-player,
.dj-video-area,
.dj-player-video {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Γενικό μάζεμα player */
.dj-player-window {
    width: clamp(340px, 88vw, 500px) !important;
    max-height: 90vh !important;
}

/* Τώρα παίζει */
.dj-now-playing {
    padding: 10px 12px !important;
    min-height: 68px;
}

.dj-cover {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
}

.dj-now-title {
    font-size: 15px !important;
}

/* Timeline */
.dj-progress-row {
    padding: 8px 12px 4px !important;
}

/* Controls */
.dj-controls {
    padding: 8px !important;
    gap: 7px !important;
}

.dj-controls button {
    width: 42px !important;
    height: 36px !important;
}

/* Volume */
.dj-volume-row {
    padding: 6px 12px 10px !important;
}

/* YouTube search / upload sections */
.dj-youtube-search-box,
.dj-add-row,
.dj-upload-row {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* Playlist παίρνει περισσότερο χώρο */
.dj-playlist {
    max-height: 280px !important;
    overflow-y: auto !important;
}

/* Mobile */
@media (max-width: 480px) {
    .dj-player-window {
        width: calc(100vw - 12px) !important;
    }

    .dj-controls button {
        width: 36px !important;
        height: 34px !important;
    }

    .dj-cover {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }
}



/* =========================================================
   CHAT IMAGE MESSAGE
========================================================= */

.chat-image-message {

    display: block;

    max-width: 320px;

    max-height: 260px;

    margin-top: 6px;

    border-radius: 8px;

    object-fit: contain;

    cursor: pointer;
}



/* =========================================================
   CHAT IMAGE THUMBNAILS + LIGHTBOX
========================================================= */

.chat-image-message {

    display: inline-block;

    width: 140px;

    height: 100px;

    max-width: 140px;

    max-height: 100px;

    margin-top: 6px;

    border-radius: 8px;

    object-fit: cover;

    cursor: zoom-in;

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

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.chat-image-message:hover {

    transform: scale(1.03);

    box-shadow:
        0 8px 25px rgba(0,0,0,.35);
}


/* LIGHTBOX */

.chat-image-lightbox {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 30px;

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

    z-index: 99999;
}


.chat-image-lightbox.active {

    display: flex;
}


.chat-image-lightbox img {

    max-width: 92vw;

    max-height: 88vh;

    object-fit: contain;

    border-radius: 10px;

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


.chat-image-lightbox-close {

    position: absolute;

    top: 18px;

    right: 22px;

    width: 42px;

    height: 42px;

    border: 0;

    border-radius: 50%;

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

    color: #fff;

    font-size: 22px;

    cursor: pointer;
}



/* =========================================================
   PAREACLUB - TRANSPARENT CHAT MESSAGES
========================================================= */

/* Κανονικές γραμμές μηνυμάτων */
#messages > li,
#messages li {

    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;

    text-shadow: none;

    border: none !important;
}


/* Αφαιρούμε τυχόν overlay / gradients */
#messages > li::before,
#messages > li::after {

    background: none !important;
    box-shadow: none !important;
}


/* Username + κείμενο χωρίς δικό τους background */
#messages .message-user,
#messages li > span {

    background: transparent !important;

    box-shadow: none !important;
}


/* Κρατάμε λίγο χώρο μεταξύ μηνυμάτων */
#messages > li {

    padding: 4px 8px !important;

    margin: 2px 0 !important;
}


/* CLICKABLE USERNAME IN MAIN CHAT */

.message-user.chat-reply-user {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 5;
}

.message-user.chat-reply-user:hover {
    text-decoration: underline;
}



/* =========================================================
   SMILEY / GIF POPUP
========================================================= */

.smiley-popup {

    position: fixed;

    width: 500px;

    max-width: calc(100vw - 20px);

    max-height: 370px;

    display: none;

    background:
        #151b3a;

    border:
        2px solid #f0a000;

    border-radius:
        12px;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.55);

    z-index:
        99999;

    overflow:
        hidden;
}


.smiley-popup.active {

    display: block;
}


.smiley-popup-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        11px 14px;

    background:
        #4a2517;

    color:
        #ffae00;

    font-weight:
        800;

    border-bottom:
        1px solid #f0a000;
}


.smiley-popup-close {

    width: 28px;

    height: 28px;

    border: 0;

    border-radius: 5px;

    background:
        #141a45;

    color:
        #fff;

    cursor: pointer;
}


.smiley-popup-grid {

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap:
        10px;

    padding:
        12px;

    max-height:
        315px;

    overflow-y:
        auto;
}


.smiley-popup-item {

    min-height:
        90px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    border:
        1px solid transparent;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #dbe5f5;

    cursor:
        pointer;
}


.smiley-popup-item:hover {

    border-color:
        #f0a000;

    background:
        rgba(255,170,0,.08);
}


.smiley-popup-item img {

    max-width:
        68px;

    max-height:
        58px;

    object-fit:
        contain;
}


.smiley-popup-item span {

    max-width:
        80px;

    font-size:
        9px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.smiley-popup-loading,
.smiley-popup-empty {

    grid-column:
        1 / -1;

    padding:
        30px;

    text-align:
        center;

    color:
        #8d9bb4;
}


.chat-emoji-message {

    display:
        inline-block;

    max-width:
        110px;

    max-height:
        90px;

    vertical-align:
        middle;

    object-fit:
        contain;

    margin:
        2px 4px;

}


@media (max-width: 650px) {

    .smiley-popup-grid {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}



/* CLICKABLE USERNAME */

.chat-reply-user {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.chat-reply-user:hover {
    text-decoration: underline;
}



/* =========================================================
   TIKTOK SHARE WINDOW
========================================================= */

.tiktok-share-overlay {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

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

    z-index: 100000;
}


.tiktok-share-overlay.active {

    display: flex;
}


.tiktok-share-window {

    width: 430px;

    max-width: 95vw;

    background: #10162b;

    border:
        1px solid #33405d;

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 25px 80px rgba(0,0,0,.65);
}


.tiktok-share-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 14px;

    background:
        linear-gradient(
            90deg,
            #171d37,
            #241833
        );

    border-bottom:
        1px solid #33405d;

    color: #fff;

    font-weight: 800;
}


#tiktokShareClose {

    width: 30px;

    height: 30px;

    border: 0;

    border-radius: 6px;

    background: #29314b;

    color: #fff;

    cursor: pointer;
}


.tiktok-share-body {

    padding: 16px;
}


.tiktok-share-body label {

    display: block;

    margin-bottom: 7px;

    color: #aab7ce;

    font-size: 11px;
}


#tiktokShareUrl {

    width: 100%;

    box-sizing: border-box;

    padding: 11px 12px;

    border:
        1px solid #37445f;

    border-radius: 7px;

    outline: none;

    background: #090f20;

    color: #fff;
}


#tiktokShareUrl:focus {

    border-color: #28d7dc;
}


.tiktok-share-error {

    min-height: 18px;

    margin-top: 7px;

    color: #ff6969;

    font-size: 10px;
}


.tiktok-share-footer {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    padding: 12px 14px;

    border-top:
        1px solid #33405d;
}


.tiktok-cancel-btn,
.tiktok-send-btn {

    border: 0;

    border-radius: 7px;

    padding: 8px 14px;

    cursor: pointer;
}


.tiktok-cancel-btn {

    background: #2b344d;

    color: #d7dfed;
}


.tiktok-send-btn {

    background:
        linear-gradient(
            90deg,
            #20d5d2,
            #fe2c55
        );

    color: #fff;

    font-weight: 700;
}



/* =========================================================
   PAREACLUB SMILEY WINDOW
========================================================= */

.pareaclub-smiley-popup {

    position: fixed;

    width: 500px;
    max-width: calc(100vw - 20px);

    max-height: 370px;

    display: none;

    background: #151b3a;

    border: 2px solid #f0a000;

    border-radius: 12px;

    box-shadow:
        0 20px 70px rgba(0,0,0,.65);

    padding: 12px;

    z-index: 999999;

    overflow-y: auto;
}


/* Ορατό όταν πατάμε Smiley */

.pareaclub-smiley-popup.open {

    display: block !important;
}


/* GRID */

.pareaclub-smiley-grid {

    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 10px;
}


/* Κάθε Smiley */

.pareaclub-smiley-item {

    width: 60px;
    height: 60px;

    display: flex;

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

    border: 1px solid transparent;

    border-radius: 8px;

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

    font-size: 30px;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}


.pareaclub-smiley-item:hover {

    background:
        rgba(255,165,0,.12);

    border-color:
        #f0a000;

    transform:
        scale(1.08);
}


/* Scrollbar */

.pareaclub-smiley-popup::-webkit-scrollbar {

    width: 8px;
}


.pareaclub-smiley-popup::-webkit-scrollbar-track {

    background: #10152d;
}


.pareaclub-smiley-popup::-webkit-scrollbar-thumb {

    background: #f0a000;

    border-radius: 10px;
}


/* Μικρότερες οθόνες */

@media (max-width: 650px) {

    .pareaclub-smiley-popup {

        width:
            calc(100vw - 30px);
    }


    .pareaclub-smiley-grid {

        grid-template-columns:
            repeat(5, 1fr);
    }


    .pareaclub-smiley-item {

        width: 50px;
        height: 50px;

        font-size: 25px;
    }
}


/* ========================================================= */


/* CUSTOM EMOJI / GIF INSIDE CHAT */

.chat-custom-emoji {
    display: inline-block;
    max-width: 110px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
    margin: 2px 5px;
}



/* =========================================================
   CAMERA / MIC / TALK CONTROL LAYOUT FIX
========================================================= */

/*
 * Δεν αφήνουμε το camera preview
 * να σπρώχνει τα controls έξω από το panel.
 */
.camera-box {
    flex: 0 0 150px !important;
    min-height: 150px !important;
    height: 150px !important;
}


/*
 * 2 x 2 σταθερό grid:
 *
 * Settings | Camera
 * TALK     | Mic
 */
.media-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 34px !important;

    gap: 5px !important;

    padding: 6px !important;

    flex: 0 0 auto !important;

    position: relative !important;
    z-index: 20 !important;

    background: #050b11;
}


/*
 * Όλα τα κουμπιά ίδιο μέγεθος.
 */
.media-row button,
#openCamSettings,
#cameraBtn,
#talkBtn,
#micBtn {
    width: 100% !important;
    min-width: 0 !important;

    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 4px 6px !important;

    box-sizing: border-box !important;

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

    position: relative;
    z-index: 25;

    cursor: pointer !important;
}


/*
 * Το TALK να μην μπορεί να "βυθιστεί"
 * από inline styles.
 */
#talkBtn {
    align-items: center !important;
    justify-content: center !important;
}


/*
 * Volume κάτω από τα κουμπιά,
 * με κανονικό δικό του χώρο.
 */
.volume-row {
    flex: 0 0 38px !important;

    min-height: 38px !important;

    position: relative !important;
    z-index: 20 !important;

    padding: 5px 8px !important;

    background: #050b11;
}


/*
 * Προστασία του κάτω panel από overlap.
 */
.camera-panel {
    overflow: visible !important;
}


/* ========================================================= */



/* =========================================================
   CAMERA CONTROL GRID - FINAL HITBOX FIX
========================================================= */

.media-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    grid-template-rows:
        36px
        36px !important;

    gap: 6px !important;

    padding: 6px !important;

    position: relative !important;

    overflow: visible !important;

    isolation: isolate !important;
}


/* SETTINGS - επάνω αριστερά */

#openCamSettings {
    grid-column: 1 !important;
    grid-row: 1 !important;
}


/* CAMERA - επάνω δεξιά */

#cameraBtn {
    grid-column: 2 !important;
    grid-row: 1 !important;
}


/* TALK - κάτω αριστερά */

#talkBtn {
    grid-column: 1 !important;
    grid-row: 2 !important;

    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    z-index: 100 !important;

    pointer-events: auto !important;

    width: 100% !important;
    height: 36px !important;
}


/* MIC - κάτω δεξιά */

#micBtn {
    grid-column: 2 !important;
    grid-row: 2 !important;

    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    z-index: 90 !important;

    pointer-events: auto !important;

    width: 100% !important;
    height: 36px !important;
}


/*
 * Κανένα κουμπί δεν επιτρέπεται
 * να καλύπτει το διπλανό.
 */

.media-row > * {
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}


/* ========================================================= */


/* =========================================================
   CAMERA CONTROLS - BETTER TALK POSITION
========================================================= */

#openCamSettings {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

#cameraBtn {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

#micBtn {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

#talkBtn {
    grid-column: 2 !important;
    grid-row: 2 !important;
}



/* =========================================================
   PAREACLUB LIVE VOICE EQUALIZER V1
========================================================= */

.user-voice-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.user-voice-eq {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;

    width: 18px;
    height: 16px;

    gap: 2px;

    opacity: .35;
}

.user-voice-eq i {
    display: block;

    width: 3px;
    height: 4px;

    border-radius: 2px;

    background: currentColor;

    transform-origin: bottom;
}

.user-voice-wrap.speaking .user-voice-eq {
    opacity: 1;
}

.user-voice-wrap.speaking .user-voice-eq i:nth-child(1) {
    animation: pareaEq1 .45s infinite alternate;
}

.user-voice-wrap.speaking .user-voice-eq i:nth-child(2) {
    animation: pareaEq2 .35s infinite alternate;
}

.user-voice-wrap.speaking .user-voice-eq i:nth-child(3) {
    animation: pareaEq3 .55s infinite alternate;
}

.user-voice-wrap.speaking .user-voice-eq i:nth-child(4) {
    animation: pareaEq4 .40s infinite alternate;
}

@keyframes pareaEq1 {
    from { height: 3px; }
    to   { height: 13px; }
}

@keyframes pareaEq2 {
    from { height: 7px; }
    to   { height: 16px; }
}

@keyframes pareaEq3 {
    from { height: 4px; }
    to   { height: 11px; }
}

@keyframes pareaEq4 {
    from { height: 6px; }
    to   { height: 15px; }
}


/* ========================================================= */



/* =========================================================
   PAREACLUB LIVE VOICE INDICATOR V1
========================================================= */

.parea-voice-eq {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;

    width: 19px;
    height: 17px;

    margin-left: 4px;
    gap: 2px;

    opacity: .18;
    vertical-align: middle;
}

.parea-voice-eq i {
    display: block;

    width: 3px;
    height: 3px;

    background: #ef4444;

    border-radius: 3px;

    transform-origin: bottom;
}


/* ----- ACTIVE SPEAKER ----- */

.parea-voice-eq.active {
    opacity: 1;
}

.parea-voice-eq.active i:nth-child(1) {
    animation: pareaVoiceBar1 .32s infinite alternate;
}

.parea-voice-eq.active i:nth-child(2) {
    animation: pareaVoiceBar2 .46s infinite alternate;
}

.parea-voice-eq.active i:nth-child(3) {
    animation: pareaVoiceBar3 .27s infinite alternate;
}

.parea-voice-eq.active i:nth-child(4) {
    animation: pareaVoiceBar4 .39s infinite alternate;
}


/* Κόκκινη ένδειξη στο μικρόφωνο */

.user-mic-icon.live-talking {
    background: #d40000 !important;

    border-radius: 50%;

    padding: 2px;

    opacity: 1 !important;

    box-shadow:
        0 0 5px #ff0000,
        0 0 11px rgba(255,0,0,.75);
}


/* Ελαφρύ highlight στον χρήστη */

.user-item.parea-speaking {
    box-shadow:
        inset 3px 0 0 #ef4444;
}


/* ----- EQUALIZER ANIMATIONS ----- */

@keyframes pareaVoiceBar1 {

    from {
        height: 3px;
    }

    to {
        height: 14px;
    }
}


@keyframes pareaVoiceBar2 {

    from {
        height: 7px;
    }

    to {
        height: 17px;
    }
}


@keyframes pareaVoiceBar3 {

    from {
        height: 4px;
    }

    to {
        height: 12px;
    }
}


@keyframes pareaVoiceBar4 {

    from {
        height: 6px;
    }

    to {
        height: 15px;
    }
}


/* ========================================================= */



/* =========================================================
   PAREACLUB SOUND EFFECTS POPUP V1
========================================================= */

.pareaclub-sounds-popup {

    position: fixed;

    width: 500px;
    max-width: calc(100vw - 20px);

    height: 370px;
    max-height: calc(100vh - 20px);

    padding: 12px;

    box-sizing: border-box;

    display: none;

    background:
        #1f213f;

    border:
        2px solid #d88b00;

    border-radius:
        12px;

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.55);

    z-index: 45000;

    overflow: hidden;
}


.pareaclub-sounds-popup.open {

    display: block;
}


.pareaclub-sounds-header {

    height: 32px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    padding:
        0 4px 9px;

    margin-bottom:
        10px;

    border-bottom:
        1px solid
        rgba(255,255,255,.13);

    color:
        #ffad16;

    font-weight:
        700;
}


.pareaclub-sounds-close {

    border: 0;

    background:
        #11166e;

    color:
        #fff;

    cursor:
        pointer;

    font-size:
        16px;

    width:
        26px;

    height:
        26px;
}


.pareaclub-sounds-grid {

    height:
        calc(100% - 48px);

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        10px;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    padding:
        4px;

    box-sizing:
        border-box;
}


.pareaclub-sound-item {

    min-width:
        0;

    min-height:
        88px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        8px;

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

    border-radius:
        9px;

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

    color:
        #fff;

    cursor:
        pointer;

    transition:
        transform .12s ease,
        background .12s ease;
}


.pareaclub-sound-item:hover {

    transform:
        translateY(-2px);

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


.pareaclub-sound-icon {

    font-size:
        28px;
}


.pareaclub-sound-name {

    width:
        100%;

    text-align:
        center;

    font-size:
        12px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.pareaclub-sounds-loading,
.pareaclub-sounds-empty {

    grid-column:
        1 / -1;

    padding:
        30px;

    text-align:
        center;

    color:
        rgba(255,255,255,.70);
}


/* Mobile */
@media screen and (max-width: 650px) {

    .pareaclub-sounds-popup {

        width:
            calc(100vw - 20px);

        height:
            min(420px, 70vh);
    }


    .pareaclub-sounds-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .pareaclub-sound-item {

        min-height:
            76px;
    }

}



/* =========================================================
   PAREACLUB SOUND EFFECTS - COMPACT GRID V2
========================================================= */

.pareaclub-sounds-popup {

    width: 350px !important;
    height: 350px !important;

    max-width:
        calc(100vw - 20px) !important;

    max-height:
        calc(100vh - 20px) !important;

    padding:
        10px !important;

    border-radius:
        12px !important;
}


.pareaclub-sounds-header {

    height:
        32px !important;

    margin-bottom:
        8px !important;

    padding:
        0 3px 8px !important;
}


.pareaclub-sounds-grid {

    height:
        calc(100% - 45px) !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    grid-auto-rows:
        76px !important;

    gap:
        10px !important;

    padding:
        4px !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;
}


/* Κάθε effect */

.pareaclub-sound-item {

    width:
        100% !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    height:
        76px !important;

    padding:
        5px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        4px !important;

    border-radius:
        9px !important;

    background:
        #12162d !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;
}


/* Εικόνα / GIF */

.pareaclub-sound-visual {

    width:
        44px !important;

    height:
        44px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0 0 44px !important;

    font-size:
        25px !important;

    overflow:
        hidden !important;
}


.pareaclub-sound-visual img {

    max-width:
        44px !important;

    max-height:
        44px !important;

    width:
        auto !important;

    height:
        auto !important;

    object-fit:
        contain !important;

    display:
        block !important;
}


/* Όνομα */

.pareaclub-sound-name {

    width:
        100% !important;

    font-size:
        9px !important;

    line-height:
        12px !important;

    text-align:
        center !important;

    white-space:
        nowrap !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;
}


/* Hover */

.pareaclub-sound-item:hover {

    transform:
        scale(1.04) !important;

    background:
        #1a2040 !important;
}


/* Scrollbar */

.pareaclub-sounds-grid::-webkit-scrollbar {

    width:
        6px;
}


.pareaclub-sounds-grid::-webkit-scrollbar-thumb {

    border-radius:
        20px;

    background:
        #ff9d00;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 650px) {

    .pareaclub-sounds-popup {

        width:
            min(350px, calc(100vw - 16px)) !important;

        height:
            min(360px, 70vh) !important;
    }


    .pareaclub-sounds-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap:
            6px !important;
    }


    .pareaclub-sound-item {

        height:
            70px !important;
    }


    .pareaclub-sound-visual {

        width:
            38px !important;

        height:
            38px !important;

        flex-basis:
            38px !important;
    }


    .pareaclub-sound-visual img {

        max-width:
            38px !important;

        max-height:
            38px !important;
    }

}



/* =========================================================
   PAREACLUB SOUND EFFECT OVERLAY V1
========================================================= */

.pareaclub-sound-overlay {

    position:
        fixed;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    pointer-events:
        none;

    opacity:
        0;

    visibility:
        hidden;

    z-index:
        60000;

    transition:
        opacity .15s ease;
}


.pareaclub-sound-overlay.show {

    opacity:
        1;

    visibility:
        visible;
}


.pareaclub-sound-overlay-box {

    max-width:
        min(420px, 70vw);

    max-height:
        min(420px, 70vh);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        12px;

    border-radius:
        14px;

    background:
        rgba(5,8,18,.75);

    box-shadow:
        0 15px 50px
        rgba(0,0,0,.55);
}


.pareaclub-sound-overlay-box img {

    max-width:
        min(360px, 65vw);

    max-height:
        min(320px, 60vh);

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    display:
        block;
}


.pareaclub-sound-overlay-label {

    max-width:
        100%;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    text-align:
        center;

    text-shadow:
        0 2px 5px
        rgba(0,0,0,.9);
}


@media screen and (max-width: 650px) {

    .pareaclub-sound-overlay-box {

        max-width:
            80vw;

        max-height:
            60vh;
    }


    .pareaclub-sound-overlay-box img {

        max-width:
            72vw;

        max-height:
            50vh;
    }

}


/* =========================================================
   PAREACLUB PROFILE SETTINGS V1
========================================================= */

.parea-profile-divider {
    height: 1px;
    background: #3a3f49;
    margin: 20px 0 16px;
}

.parea-profile-title {
    margin: 0 0 15px;
    color: #f39c12;
    font-size: 16px;
}

.parea-profile-photo-area {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.parea-profile-photo-preview {
    width: 105px;
    height: 105px;
    flex: 0 0 105px;

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

    overflow: hidden;

    border: 2px solid #454d5a;
    border-radius: 10px;

    background: #0d1015;
}

/*
 * PREVIEW:
 * contain = ολόκληρη φωτογραφία,
 * χωρίς crop.
 */
.parea-profile-photo-preview img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;
}

.parea-profile-photo-empty {
    font-size: 42px;
    opacity: .65;
}

.parea-profile-photo-controls {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.parea-profile-photo-controls strong {
    font-size: 13px;
}

.parea-profile-photo-controls small {
    color: #9099a8;
    font-size: 10px;
    line-height: 1.4;
}

.parea-profile-photo-buttons {
    display: flex;
    gap: 7px;
    margin-top: 7px;
}

.parea-profile-button {
    border: 1px solid #465164;
    border-radius: 5px;
    padding: 7px 10px;

    background: #252b35;
    color: #fff;

    cursor: pointer;
}

.parea-profile-button.danger {
    border-color: #7c3434;
    color: #ff9c9c;
}

.parea-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.parea-profile-field {
    display: block;
}

.parea-profile-field > span {
    display: block;

    margin-bottom: 5px;

    color: #d7dce5;
    font-size: 11px;
    font-weight: 700;
}

.parea-profile-field input,
.parea-profile-field select,
.parea-profile-field textarea {
    width: 100%;
    box-sizing: border-box;

    border: 1px solid #4a515e;
    border-radius: 5px;

    padding: 8px;

    background: #22262d;
    color: #fff;

    outline: none;
}

.parea-profile-field input:focus,
.parea-profile-field select:focus,
.parea-profile-field textarea:focus {
    border-color: #f39c12;
}

.parea-profile-comment {
    margin-top: 12px;
}

.parea-profile-comment textarea {
    resize: vertical;
    min-height: 70px;
}

.parea-profile-comment small {
    display: block;

    margin-top: 4px;

    text-align: right;

    color: #777f8d;
    font-size: 9px;
}

.parea-profile-save-row {
    display: flex;

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

    gap: 12px;

    margin-top: 15px;
}

.parea-profile-status {
    color: #56d897;
    font-size: 11px;
}

.parea-profile-status.error {
    color: #ff7474;
}

.parea-profile-save {
    border: 0;
    border-radius: 5px;

    padding: 9px 14px;

    background: #00b894;
    color: #fff;

    font-weight: 700;
    cursor: pointer;
}

.parea-profile-save:disabled {
    opacity: .55;
    cursor: wait;
}


/*
 * Η μικρή φωτογραφία στη λίστα χρηστών.
 *
 * Το original αρχείο ΔΕΝ αλλάζει.
 * Εδώ αλλάζει μόνο ο τρόπος προβολής.
 */
.user-profile-photo {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: block;

    border-radius: 50%;

    object-fit: cover;
    object-position: center center;

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


/* Custom εικόνα role badge */
.user-role-badge-img {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    object-fit: contain;
    object-position: center center;

    display: block;
}


@media (max-width: 600px) {

    .parea-profile-grid {
        grid-template-columns: 1fr;
    }

    .parea-profile-photo-area {
        align-items: flex-start;
    }
}


/* =========================================================
   PAREACLUB PROFILE SETTINGS V1
========================================================= */

.parea-profile-divider {
    height: 1px;
    background: #3a3f49;
    margin: 20px 0 16px;
}

.parea-profile-title {
    margin: 0 0 15px;
    color: #f39c12;
    font-size: 16px;
}

.parea-profile-photo-area {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.parea-profile-photo-preview {
    width: 105px;
    height: 105px;
    flex: 0 0 105px;

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

    overflow: hidden;

    border: 2px solid #454d5a;
    border-radius: 10px;

    background: #0d1015;
}

/*
 * PREVIEW:
 * contain = ολόκληρη φωτογραφία,
 * χωρίς crop.
 */
.parea-profile-photo-preview img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;
}

.parea-profile-photo-empty {
    font-size: 42px;
    opacity: .65;
}

.parea-profile-photo-controls {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.parea-profile-photo-controls strong {
    font-size: 13px;
}

.parea-profile-photo-controls small {
    color: #9099a8;
    font-size: 10px;
    line-height: 1.4;
}

.parea-profile-photo-buttons {
    display: flex;
    gap: 7px;
    margin-top: 7px;
}

.parea-profile-button {
    border: 1px solid #465164;
    border-radius: 5px;
    padding: 7px 10px;

    background: #252b35;
    color: #fff;

    cursor: pointer;
}

.parea-profile-button.danger {
    border-color: #7c3434;
    color: #ff9c9c;
}

.parea-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.parea-profile-field {
    display: block;
}

.parea-profile-field > span {
    display: block;

    margin-bottom: 5px;

    color: #d7dce5;
    font-size: 11px;
    font-weight: 700;
}

.parea-profile-field input,
.parea-profile-field select,
.parea-profile-field textarea {
    width: 100%;
    box-sizing: border-box;

    border: 1px solid #4a515e;
    border-radius: 5px;

    padding: 8px;

    background: #22262d;
    color: #fff;

    outline: none;
}

.parea-profile-field input:focus,
.parea-profile-field select:focus,
.parea-profile-field textarea:focus {
    border-color: #f39c12;
}

.parea-profile-comment {
    margin-top: 12px;
}

.parea-profile-comment textarea {
    resize: vertical;
    min-height: 70px;
}

.parea-profile-comment small {
    display: block;

    margin-top: 4px;

    text-align: right;

    color: #777f8d;
    font-size: 9px;
}

.parea-profile-save-row {
    display: flex;

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

    gap: 12px;

    margin-top: 15px;
}

.parea-profile-status {
    color: #56d897;
    font-size: 11px;
}

.parea-profile-status.error {
    color: #ff7474;
}

.parea-profile-save {
    border: 0;
    border-radius: 5px;

    padding: 9px 14px;

    background: #00b894;
    color: #fff;

    font-weight: 700;
    cursor: pointer;
}

.parea-profile-save:disabled {
    opacity: .55;
    cursor: wait;
}


/*
 * Η μικρή φωτογραφία στη λίστα χρηστών.
 *
 * Το original αρχείο ΔΕΝ αλλάζει.
 * Εδώ αλλάζει μόνο ο τρόπος προβολής.
 */
.user-profile-photo {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: block;

    border-radius: 50%;

    object-fit: cover;
    object-position: center center;

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


/* Custom εικόνα role badge */
.user-role-badge-img {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    object-fit: contain;
    object-position: center center;

    display: block;
}


@media (max-width: 600px) {

    .parea-profile-grid {
        grid-template-columns: 1fr;
    }

    .parea-profile-photo-area {
        align-items: flex-start;
    }
}



/* =========================================================
   PAREACLUB TOP PROFILE MODAL
========================================================= */

.parea-profile-modal {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

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

    z-index: 50000;
}


.parea-profile-modal.open {

    display: flex;
}


.parea-profile-window {

    width: 520px;

    max-width:
        calc(100vw - 30px);

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;

    background: #151922;

    border:
        2px solid #f39c12;

    border-radius: 10px;

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.65);

    color: #fff;
}


.parea-profile-window-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 13px 15px;

    background: #191d26;

    border-bottom:
        1px solid #414650;

    color: #f39c12;
}


#pareaProfileCloseBtn {

    width: 30px;

    height: 30px;

    border: 1px solid #444b58;

    border-radius: 5px;

    background: #222832;

    color: #fff;

    cursor: pointer;
}


.parea-profile-window-content {

    padding: 16px;
}


/*
 * Στο νέο profile modal δεν χρειάζεται
 * ο πάνω divider που χρησιμοποιούσαμε
 * μέσα στις ρυθμίσεις κάμερας.
 */
.parea-profile-window
.parea-profile-divider {

    display: none;
}


.parea-profile-window
.parea-profile-title {

    margin-top: 0;
}


@media (max-width: 600px) {

    .parea-profile-modal {

        padding: 8px;
    }


    .parea-profile-window {

        width: 100%;

        max-width: 100%;

        max-height:
            calc(100vh - 16px);
    }
}



/* =========================================================
   PAREACLUB DJ PLAYER - MOBILE WINDOW V1
========================================================= */

@media screen and (max-width: 768px) {

    #djPlayerWindow {

        position: fixed !important;

        left: 4vw !important;
        top: 9dvh !important;

        right: auto !important;
        bottom: auto !important;

        transform: none !important;

        width: 92vw !important;
        height: 72dvh !important;

        min-width: 260px !important;
        min-height: 280px !important;

        max-width: 96vw !important;
        max-height: 84dvh !important;

        overflow: auto !important;

        border-radius: 10px !important;

        z-index: 60000 !important;

        resize: none !important;

        box-sizing: border-box !important;
    }


    /*
     * Η κεφαλίδα μένει πάντα ορατή,
     * ώστε να έχουμε πάντα το Χ.
     */
    #djPlayerWindow
    .dj-player-header {

        position: sticky !important;

        top: 0 !important;

        z-index: 20 !important;

        min-height: 42px !important;

        cursor: move !important;

        touch-action: none !important;
    }


    #closeDjPlayerBtn {

        position: relative !important;

        z-index: 30 !important;

        flex: 0 0 34px !important;

        width: 34px !important;
        height: 34px !important;

        font-size: 18px !important;

        touch-action: manipulation !important;
    }


    /*
     * Χώρος στο κάτω μέρος για
     * το resize handle.
     */
    #djPlayerWindow {

        padding-bottom: 20px !important;
    }


    #djMobileResizeHandle {

        position: absolute;

        right: 2px;
        bottom: 2px;

        width: 30px;
        height: 30px;

        z-index: 50;

        cursor: nwse-resize;

        touch-action: none;

        user-select: none;

        display: flex;

        align-items: flex-end;
        justify-content: flex-end;

        padding: 4px;

        color: #f3a600;

        font-size: 18px;

        background:
            linear-gradient(
                135deg,
                transparent 50%,
                rgba(243,166,0,.25) 50%
            );

        border-radius:
            0 0 8px 0;
    }

}



/* =========================================================
   USER LIST PROFILE PHOTO + MINI PROFILE V1
========================================================= */

.user-item {

    display: flex;

    align-items: center;

    gap: 6px;
}


/*
 * Η πράσινη τελίτσα δεν χρησιμοποιείται
 * πλέον μπροστά από το όνομα.
 */
.user-item .user-status {

    display: none !important;
}


/*
 * Φωτογραφία χρήστη.
 */
.user-profile-photo-wrap {

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: inline-flex;

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

    border-radius: 50%;

    overflow: hidden;

    cursor: pointer;

    background: #151d29;

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

    box-shadow:
        0 0 0 1px
        rgba(0,0,0,.35);
}


.user-profile-photo {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    border-radius: 50%;
}


.user-profile-photo-empty {

    width: 100%;
    height: 100%;

    display: flex;

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

    font-size: 17px;

    background: #172131;
}


/*
 * Role / management badge.
 */
.user-avatar {

    width: 22px !important;

    flex: 0 0 22px !important;

    display: inline-flex;

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


.user-role-badge-img {

    width: 20px;
    height: 20px;

    display: block;

    object-fit: contain;
    object-position: center center;
}


.user-role-badge-fallback {

    display: inline-flex;

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

    font-size: 17px;
}


/* =========================================================
   MINI PROFILE CARD
========================================================= */

.parea-user-profile-card {

    position: fixed;

    display: none;

    width: 285px;

    max-width:
        calc(100vw - 16px);

    padding: 13px;

    z-index: 80000;

    color: #eef4ff;

    background:
        linear-gradient(
            155deg,
            #18202c,
            #0d131c
        );

    border:
        1px solid #36475f;

    border-radius: 12px;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.65);

    box-sizing: border-box;

    pointer-events: none;
}


.parea-user-profile-card.open {

    display: block;
}


.parea-user-profile-card-top {

    display: flex;

    align-items: center;

    gap: 11px;

    padding-bottom: 11px;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);
}


.parea-user-profile-card-photo,
.parea-user-profile-card-photo-empty {

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    border-radius: 50%;

    border:
        2px solid #d3a51d;

    background: #192231;
}


.parea-user-profile-card-photo {

    display: block;

    object-fit: cover;
    object-position: center center;
}


.parea-user-profile-card-photo-empty {

    display: flex;

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

    font-size: 28px;
}


.parea-user-profile-card-identity {

    min-width: 0;

    flex: 1;
}


.parea-user-profile-card-name {

    display: flex;

    align-items: center;

    gap: 6px;

    min-width: 0;

    font-size: 15px;
}


.parea-user-profile-card-name strong {

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.parea-user-profile-card-badge {

    width: 22px;
    height: 22px;

    object-fit: contain;

    flex: 0 0 22px;
}


.parea-user-profile-card-badge-fallback {

    font-size: 19px;
}


.parea-user-profile-card-role {

    margin-top: 4px;

    color: #d4a92c;

    font-size: 10px;

    text-transform: uppercase;
}


.parea-user-profile-card-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-top: 11px;
}


.parea-user-profile-card-grid > div {

    padding: 7px;

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

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

    border-radius: 7px;
}


.parea-user-profile-card-grid span {

    display: block;

    margin-bottom: 3px;

    color: #8391a6;

    font-size: 9px;
}


.parea-user-profile-card-grid strong {

    display: block;

    color: #f3f6fc;

    font-size: 11px;
}


.parea-user-profile-card-comment {

    margin-top: 10px;

    padding: 9px;

    color: #d3dbe8;

    font-size: 11px;

    line-height: 1.4;

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

    border-radius: 7px;

    border-left:
        2px solid #d5a81e;

    word-break: break-word;
}



/*
 * =========================================================
 * PAREACLUB PRIVATE ROOM OWNER PROFILE V1
 * =========================================================
 */

.parea-private-owner-crown-v1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
    filter:
        drop-shadow(
            0 0 5px
            rgba(255,205,50,.50)
        );
}

.user-private-owner-crown-v1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
    filter:
        drop-shadow(
            0 0 4px
            rgba(255,205,50,.45)
        );
}

.parea-user-profile-private-rooms-v1 {
    margin-top: 10px;
    padding: 9px;

    background:
        rgba(213,168,30,.07);

    border:
        1px solid
        rgba(213,168,30,.25);

    border-left:
        2px solid #d5a81e;

    border-radius: 7px;
}

.parea-user-profile-private-owner-title-v1 {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #f1cf62;
    font-size: 10px;
}

.parea-user-profile-private-owner-title-v1 strong {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.parea-user-profile-private-room-list-v1 {
    display: flex;
    flex-direction: column;
    gap: 5px;

    margin-top: 7px;
}

.parea-user-profile-private-room-v1 {
    display: flex;
    align-items: center;
    gap: 6px;

    min-width: 0;

    padding: 5px 7px;

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

    border-radius: 5px;
}

.parea-user-profile-private-room-v1 strong {
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #f3f6fc;

    font-size: 10px;
    font-weight: 600;
}



/*
 * =========================================================
 * PAREACLUB PRIVATE ROOM OWNER INLINE V2
 * =========================================================
 */

.parea-user-profile-owner-rooms-inline-v2 {

    display: flex;

    flex-direction: column;

    gap: 2px;

    margin-top: 3px;
}


.parea-user-profile-owner-room-inline-v2 {

    display: flex;

    align-items: center;

    gap: 4px;

    min-width: 0;

    color: #e7c75a;

    font-size: 10px;

    line-height: 1.3;
}


.parea-user-profile-owner-room-inline-v2 span {

    flex: 0 0 auto;

    font-size: 10px;
}


.parea-user-profile-owner-room-inline-v2 strong {

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #dce6f3;

    font-size: 10px;

    font-weight: 600;
}


/*
 * Το παλιό μεγάλο Private Room box
 * δεν εμφανίζεται πλέον.
 */

.parea-user-profile-private-rooms-v1 {

    display: none !important;
}


/*
 * MOBILE
 */
@media screen and (max-width: 768px) {

    .user-profile-photo-wrap {

        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }


    .user-avatar {

        width: 19px !important;

        flex-basis: 19px !important;
    }


    .user-role-badge-img {

        width: 17px;
        height: 17px;
    }


    .parea-user-profile-card {

        width:
            min(
                285px,
                calc(100vw - 16px)
            );

        pointer-events: auto;
    }
}



/* =========================================================
   PAREACLUB PRIVATE ADMIN WINDOW V1
========================================================= */


/* Header του Private */
.private-chat-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}


/* Αριστερό μέρος τίτλου */
.private-chat-header-user {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}


/* Δεξιά κουμπιά */
.private-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}


/* Gear + Close */
#privateAdminGear,
#privateChatClose {
    width: 30px;
    height: 30px;

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

    padding: 0;

    border: 0;
    border-radius: 5px;

    cursor: pointer;

    font-size: 17px;
    line-height: 1;
}


/* Gear */
#privateAdminGear {
    background: #253247;
    color: #f4c542;
}

#privateAdminGear:hover {
    background: #34445e;
}


/* Close */
#privateChatClose {
    background: transparent;
    color: #ff5c5c;
}

#privateChatClose:hover {
    background: rgba(255, 80, 80, .15);
}


/* =========================================================
   ADMIN FLOATING WINDOW
========================================================= */

.private-admin-window {
    position: fixed;

    left: 50%;
    top: 100px;

    transform: translateX(-50%);

    width: 310px;
    max-width: calc(100vw - 16px);

    z-index: 60000;

    overflow: hidden;

    box-sizing: border-box;

    background: #111923;

    border: 1px solid #3a4a60;
    border-radius: 9px;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, .70);

    color: #eef4ff;
}


/* Header = drag handle */
.private-admin-header {
    height: 42px;

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

    padding: 0 8px 0 12px;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            #26364b,
            #192536
        );

    border-bottom: 1px solid #3a4a60;

    cursor: move;
    touch-action: none;

    user-select: none;
}


.private-admin-title {
    display: flex;
    align-items: center;

    gap: 7px;

    min-width: 0;

    font-size: 13px;
}


.private-admin-title strong {
    color: #f4c542;
}


/* X */
#privateAdminClose {
    width: 30px;
    height: 30px;

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

    flex: 0 0 30px;

    padding: 0;

    background: transparent;

    color: #ff6060;

    border: 0;
    border-radius: 5px;

    cursor: pointer;

    font-size: 17px;
}

#privateAdminClose:hover {
    background: rgba(255, 80, 80, .15);
}


/* =========================================================
   ADMIN ACTIONS
========================================================= */

.private-admin-body {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 8px;

    background: #111923;
}


.private-admin-body button {
    width: 100%;

    min-height: 38px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 7px 11px;

    box-sizing: border-box;

    background: #182331;

    color: #eaf0f8;

    border: 1px solid #29394e;
    border-radius: 6px;

    text-align: left;

    cursor: pointer;

    font-size: 13px;
}


.private-admin-body button:hover {
    background: #223249;
    border-color: #3d5574;
}


.private-admin-separator {
    height: 1px;

    margin: 3px 2px;

    background: #334155;
}


.private-admin-body button.private-admin-danger {
    color: #ff8080;
}


.private-admin-body button.private-admin-danger:hover {
    background: rgba(180, 30, 30, .18);
    border-color: #743636;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 768px) {

    .private-admin-window {
        width: calc(100vw - 16px);
        max-width: 360px;

        left: 8px;
        top: 60px;

        transform: none;
    }


    .private-admin-header {
        height: 44px;
    }


    .private-admin-body {
        max-height: calc(100dvh - 125px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }


    .private-admin-body button {
        min-height: 42px;
        font-size: 14px;
    }
}



/* =========================================================
   PRIVATE ADMIN PROFESSIONAL DESIGN V2
========================================================= */

.private-admin-window {

    width: 430px !important;
    max-width: calc(100vw - 16px) !important;

    background:
        linear-gradient(
            155deg,
            #0c1420,
            #101b2a
        ) !important;

    border:
        1px solid #26568d !important;

    border-radius:
        14px !important;

    box-shadow:
        0 22px 60px
        rgba(0,0,0,.75),
        0 0 22px
        rgba(25,105,220,.10) !important;

    overflow: hidden;
}


/* HEADER */

.private-admin-header {

    height: 48px !important;

    padding:
        0 10px 0 15px !important;

    background:
        linear-gradient(
            180deg,
            #142239,
            #0d1727
        ) !important;

    border-bottom:
        1px solid
        rgba(60,125,205,.35) !important;
}


.private-admin-title {

    font-size:
        14px !important;

    font-weight:
        700;
}


.private-admin-title > span:first-child {

    font-size:
        19px;
}


.private-admin-title strong {

    color:
        #ffbd21 !important;
}


/* =========================================================
   USER CARD
========================================================= */

.private-admin-user-card {

    display: flex;

    align-items: center;

    gap: 13px;

    margin:
        14px 14px 5px;

    padding:
        11px;

    background:
        linear-gradient(
            145deg,
            #101d2e,
            #0c1522
        );

    border:
        1px solid
        rgba(65,120,185,.28);

    border-radius:
        11px;
}


.private-admin-user-photo-wrap {

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    position: relative;

    border-radius:
        50%;

    overflow: hidden;

    border:
        2px solid #268cff;

    box-shadow:
        0 0 15px
        rgba(38,140,255,.25);

    background:
        #101827;
}


.private-admin-user-photo,
.private-admin-user-photo-fallback {

    width: 100%;
    height: 100%;
}


.private-admin-user-photo {

    display: block;

    object-fit: cover;
    object-position: center center;
}


.private-admin-user-photo-fallback {

    display: flex;

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

    font-size:
        27px;
}


.private-admin-user-info {

    min-width: 0;

    flex: 1;
}


.private-admin-user-name-row {

    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;
}


#privateAdminCardUsername {

    color:
        #3b9cff;

    font-size:
        17px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.private-admin-role-badge {

    width: 22px;
    height: 22px;

    object-fit: contain;
}


.private-admin-user-meta {

    display: flex;

    flex-wrap: wrap;

    gap:
        5px 14px;

    margin-top:
        7px;

    color:
        #8998ad;

    font-size:
        11px;
}


.private-admin-user-meta strong {

    color:
        #e7edf7;
}


/* =========================================================
   BUTTON GRID
========================================================= */

.private-admin-body {

    display: grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        ) !important;

    gap:
        9px !important;

    padding:
        11px 14px 15px !important;

    background:
        transparent !important;
}


.private-admin-separator {

    display:
        none !important;
}


.private-admin-body button {

    position: relative;

    width:
        100% !important;

    min-width:
        0 !important;

    min-height:
        92px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        8px !important;

    padding:
        10px 4px !important;

    overflow:
        hidden;

    background:
        linear-gradient(
            150deg,
            #15243a,
            #0e1928
        ) !important;

    color:
        #f4f7fc !important;

    border:
        1px solid
        #294a70 !important;

    border-radius:
        12px !important;

    text-align:
        center !important;

    font-size:
        12px !important;

    font-weight:
        700;

    transition:
        transform .14s ease,
        border-color .14s ease,
        box-shadow .14s ease,
        background .14s ease;
}


.private-admin-body button:hover {

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            150deg,
            #1b3150,
            #102036
        ) !important;

    border-color:
        #3989dc !important;

    box-shadow:
        0 7px 18px
        rgba(20,110,230,.18);
}


.private-admin-body button:active {

    transform:
        translateY(0)
        scale(.97);
}


/*
 * Το πρώτο text node είναι emoji/icon.
 * Τα κάνουμε να φαίνονται σαν icon control.
 */

.private-admin-body button {

    font-size:
        25px !important;
}


.private-admin-body button span {

    font-size:
        11px !important;

    line-height:
        1.15;

    color:
        #f0f4fa;
}


/* CAMERA */

.private-admin-body
[data-private-admin-action="camera"] {

    border-color:
        rgba(40,135,255,.55) !important;

    box-shadow:
        inset 0 0 18px
        rgba(20,100,255,.06);
}


/* FRIEND */

.private-admin-body
[data-private-admin-action="friend"] {

    border-color:
        rgba(30,190,100,.45) !important;
}


/* BLOCK */

.private-admin-body
[data-private-admin-action="block"] {

    border-color:
        rgba(230,65,80,.45) !important;
}


/* TEXT MUTE / MIC MUTE */

.private-admin-body
[data-private-admin-action="textmute"],
.private-admin-body
[data-private-admin-action="micmute"] {

    border-color:
        rgba(245,150,20,.48) !important;
}


/* KICK */

.private-admin-body
[data-private-admin-action="kick"] {

    border-color:
        rgba(255,90,55,.48) !important;
}


/* BAN */

.private-admin-body
[data-private-admin-action="ban"] {

    border-color:
        rgba(235,50,80,.62) !important;

    background:
        linear-gradient(
            150deg,
            #251724,
            #15121b
        ) !important;
}


.private-admin-body
[data-private-admin-action="ban"]:hover {

    border-color:
        #e64662 !important;

    box-shadow:
        0 7px 20px
        rgba(220,40,70,.18);
}


/* CLOSE BUTTON */

#privateAdminClose {

    color:
        #ff5757 !important;

    font-size:
        21px !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 768px) {

    .private-admin-window {

        width:
            calc(100vw - 16px) !important;

        max-width:
            390px !important;
    }


    .private-admin-user-card {

        margin:
            10px 10px 3px;

        padding:
            9px;
    }


    .private-admin-user-photo-wrap {

        width:
            50px;

        height:
            50px;

        flex-basis:
            50px;
    }


    .private-admin-body {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:
            7px !important;

        padding:
            9px 10px 12px !important;

        max-height:
            calc(100dvh - 160px) !important;

        overflow-y:
            auto !important;
    }


    .private-admin-body button {

        min-height:
            77px !important;

        font-size:
            22px !important;
    }


    .private-admin-body button span {

        font-size:
            10px !important;
    }

}



/* =========================================================
   PAREACLUB PROFILE PHOTO PREVIEW FIX
========================================================= */

.parea-profile-photo-preview {

    width: 120px !important;
    height: 120px !important;

    min-width: 120px !important;
    min-height: 120px !important;

    flex: 0 0 120px !important;

    display: flex !important;

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

    overflow: hidden !important;

    position: relative !important;

    background: #101722 !important;

    border:
        2px solid #f39c12 !important;

    border-radius: 10px !important;

    box-sizing: border-box !important;
}


/*
 * Η πραγματική φωτογραφία.
 *
 * contain = εμφανίζεται ΟΛΗ η φωτογραφία
 * χωρίς κόψιμο.
 *
 * Δεν κάνουμε resize του αρχικού αρχείου.
 * Αλλάζει μόνο η προβολή στον browser.
 */
.parea-profile-photo-preview img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: 1 !important;

    visibility: visible !important;

    position: relative !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;
}


/*
 * Placeholder όταν δεν υπάρχει φωτογραφία.
 */
.parea-profile-photo-empty {

    width: 100% !important;
    height: 100% !important;

    display: flex !important;

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

    font-size: 42px !important;

    color: #8f9aab !important;
}


/* MOBILE */

@media screen and (max-width: 768px) {

    .parea-profile-photo-preview {

        width: 105px !important;
        height: 105px !important;

        min-width: 105px !important;
        min-height: 105px !important;

        flex-basis: 105px !important;
    }
}



/* =========================================================
   PAREACLUB CLEAN PROFESSIONAL LAYOUT
   Remove old gold outlines from main interface only
========================================================= */

/* Αριστερό panel δωματίων */
.rooms-panel {
    border-color: #1e293b !important;
}

/* Panel κάμερας */
.camera-panel {
    border-color: #1e293b !important;
}

/* Δεξί panel χρηστών */
.users-panel {
    border-color: #1e293b !important;
}

/* Βασικές οριζόντιες γραμμές */
.rooms-panel,
.camera-panel,
.users-panel {
    box-shadow: none !important;
}

/* Toolbar κάτω από το chat */
.toolbar {
    border-top-color: #1e293b !important;
    border-bottom-color: #1e293b !important;
}

/* Input περιοχής δημόσιου chat */
#messageInput {
    border-color: #263746 !important;
}

/* Καθαρό dark separation αντί για χρυσό */
.rooms-panel,
.camera-panel,
.users-panel {
    outline: none !important;
}


/* =========================================================
   IMPORTANT
   Buttons / Private / Admin / Profile remain untouched
========================================================= */


/* =========================================================
   TOPBAR LEFT / RIGHT SWAP
========================================================= */

.topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Τα κουμπιά πάνε αριστερά */
.top-actions {
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Το PAREACLUB πάει δεξιά */
.brand {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}



/* =========================================================
   TOPBAR BUTTON ORDER V2
   EXIT -> SETTINGS -> DJ PLAYER
========================================================= */

.top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}


/* 1. ΕΞΟΔΟΣ */
#logoutBtn {
    order: 1 !important;
}


/* 2. ΡΥΘΜΙΣΕΙΣ / PROFILE */
#settingsBtn {
    order: 2 !important;
}


/* 3. DJ PLAYER */
#openDjPlayerBtn {
    order: 3 !important;
}


/* Κρύβουμε username + role από την topbar */
#myUsernameTop {
    display: none !important;
}


/* =========================================================
   CLEAN ROOM LIST
   Hide circular room user-count badges
========================================================= */

/* Κρύβουμε τις στρογγυλές ενδείξεις χρηστών */
.room-count,
.room-user-count,
.room-users-count,
.room-online-count,
.room-badge,
.room-count-badge,
#roomList .badge {
    display: none !important;
}

/* Καθαρίζουμε τυχόν περιγράμματα δεξιά */
#roomList .room-item,
#roomList > div,
#roomList li {
    padding-right: 8px !important;
}

/* Δεν πειράζουμε το πράσινο active background */
#roomList .active,
#roomList .room-active {
    box-shadow: none !important;
}


/* =========================================================
   ROOM COUNTER - REMOVE ONLY THE CAPSULE/BORDER
========================================================= */

.room-count,
.room-user-count,
.room-users-count,
.room-online-count,
.room-badge,
.room-count-badge,
#roomList .badge {

    display: inline-flex !important;

    background: transparent !important;

    border: none !important;
    outline: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    padding: 0 !important;

    color: #9b8ac4 !important;
}

/* Ενεργό δωμάτιο - ο αριθμός παραμένει πράσινος */
#roomList .active .room-count,
#roomList .active .room-user-count,
#roomList .active .room-users-count,
#roomList .active .room-online-count,
#roomList .active .room-badge,
#roomList .active .room-count-badge,
#roomList .active .badge {

    color: #00e760 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* =========================================================
   PUBLIC CHAT YOUTUBE WINDOW
========================================================= */

.parea-youtube-chat-modal {

    position: fixed;

    inset: 0;

    z-index: 90000;

    display: none;

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

    padding: 15px;

    background:
        rgba(0, 0, 0, .45);
}


.parea-youtube-chat-modal.open {

    display: flex;
}


.parea-youtube-chat-window {

    width: 430px;

    max-width:
        calc(100vw - 24px);

    background:
        #101925;

    border:
        1px solid #33465f;

    border-radius:
        10px;

    overflow: hidden;

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.70);

    color:
        #fff;
}


.parea-youtube-chat-header {

    height: 46px;

    display: flex;

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

    padding:
        0 10px 0 15px;

    background:
        linear-gradient(
            180deg,
            #17253a,
            #111b2a
        );

    border-bottom:
        1px solid #33465f;
}


.parea-youtube-chat-header strong {

    color:
        #ff5252;

    font-size:
        14px;
}


#pareaYoutubeChatClose {

    width: 30px;
    height: 30px;

    padding: 0;

    background:
        transparent;

    color:
        #ff6262;

    border:
        0;

    border-radius:
        5px;

    cursor:
        pointer;

    font-size:
        18px;
}


.parea-youtube-chat-body {

    padding:
        16px;
}


.parea-youtube-chat-body label {

    display: block;

    margin-bottom:
        7px;

    color:
        #d7e0ed;

    font-size:
        12px;

    font-weight:
        700;
}


#pareaYoutubeChatUrl {

    width: 100%;

    height: 40px;

    padding:
        7px 10px;

    box-sizing:
        border-box;

    background:
        #08111d;

    color:
        #fff;

    border:
        1px solid #3a506b;

    border-radius:
        6px;

    outline:
        none;
}


#pareaYoutubeChatUrl:focus {

    border-color:
        #458ee8;
}


.parea-youtube-chat-status {

    min-height:
        20px;

    padding-top:
        6px;

    color:
        #ff7777;

    font-size:
        11px;
}


.parea-youtube-chat-actions {

    display: flex;

    justify-content: flex-end;

    gap:
        8px;

    margin-top:
        8px;
}


.parea-youtube-chat-actions button {

    min-height:
        34px;

    padding:
        6px 12px;

    background:
        #172235;

    color:
        #e8eef7;

    border:
        1px solid #344760;

    border-radius:
        6px;

    cursor:
        pointer;
}


.parea-youtube-chat-actions button.primary {

    background:
        #192aa5;

    border-color:
        #3047d8;

    color:
        #fff;
}


/* MOBILE */

@media screen and (max-width: 768px) {

    .parea-youtube-chat-modal {

        align-items:
            flex-start;

        padding-top:
            65px;
    }


    .parea-youtube-chat-window {

        width:
            calc(100vw - 16px);
    }
}




/* =========================================================
   PAREACLUB GAMES HUB V2
   3D / NEON ARCADE DESIGN
========================================================= */

.parea-games-modal {
    position: fixed;
    inset: 0;
    z-index: 90000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(40, 72, 145, .24),
            transparent 45%
        ),
        rgba(3, 6, 14, .78);
    backdrop-filter: blur(8px);
}

.parea-games-modal.open {
    display: flex;
}

.parea-games-window-v2 {
    position: relative;
    width: min(860px, calc(100vw - 40px));
    height: min(800px, calc(100vh - 40px));
    max-height: min(800px, calc(100vh - 40px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(92, 160, 255, .55);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(0, 171, 255, .11),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(229, 38, 255, .11),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #0b1528 0%,
            #07101e 100%
        );
    box-shadow:
        0 35px 110px rgba(0,0,0,.82),
        0 0 55px rgba(34, 129, 255, .13),
        inset 0 1px 0 rgba(255,255,255,.07);
    color: #fff;
}

.parea-games-window-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255,255,255,.018) 38%,
            transparent 56%
        );
}

.parea-games-header {
    position: relative;
    z-index: 2;
    min-height: 66px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 0 15px 0 19px;
    background:
        linear-gradient(
            180deg,
            rgba(18, 38, 71, .98),
            rgba(10, 22, 41, .98)
        );
    border-bottom: 1px solid rgba(95, 146, 205, .35);
}

.parea-games-header-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.parea-games-header-icon {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(58, 189, 255, .5);
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            #173966,
            #091829
        );
    box-shadow:
        0 0 19px rgba(0, 174, 255, .14),
        inset 0 1px 0 rgba(255,255,255,.09);
    font-size: 23px;
}

.parea-games-header-brand div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.parea-games-header strong {
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .1px;
}

.parea-games-header-brand span {
    color: #86a4c9;
    font-size: 11px;
}

#pareaGamesClose {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(120, 150, 187, .45);
    border-radius: 10px;
    background: rgba(13, 26, 46, .85);
    color: #ff7a89;
    cursor: pointer;
    font-size: 18px;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

#pareaGamesClose:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 97, 125, .75);
    box-shadow: 0 0 20px rgba(255, 69, 111, .15);
}

.parea-games-body-v2 {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.parea-games-screen {
    min-height: 0;
}


.parea-games-embed-screen {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}


.parea-games-embed-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin-bottom: 12px;
}


.parea-games-embed-title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 17px;
}


.parea-games-embed-title span {
    font-size: 22px;
}


.parea-games-embed-body {
    flex: 1 1 auto;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(70, 144, 255, .38);
    border-radius: 14px;
    background: rgba(5, 12, 24, .96);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 10px 30px rgba(0,0,0,.2);
}


#pareaGamesEmbedFrame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    border: 0;
    background: #050c18;
}


.parea-games-hero {
    position: relative;
    overflow: hidden;
    min-height: 128px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 19px;
    padding: 21px 24px;
    border: 1px solid rgba(70, 144, 255, .38);
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(38, 106, 255, .18),
            transparent 37%
        ),
        linear-gradient(
            135deg,
            rgba(11, 33, 63, .95),
            rgba(12, 18, 37, .98)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 12px 35px rgba(0,0,0,.22);
}

.parea-games-hero-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    right: 40px;
    top: -55px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(0, 190, 255, .26),
            transparent 66%
        );
    filter: blur(3px);
    pointer-events: none;
}

.parea-games-hero-copy {
    position: relative;
    z-index: 1;
}

.parea-games-hero-kicker {
    display: inline-block;
    margin-bottom: 6px;
    color: #5bdcff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.8px;
}

.parea-games-hero-copy h2 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 27px;
    font-weight: 900;
}

.parea-games-hero-copy p {
    max-width: 720px;
    margin: 0;
    color: #9eb6d2;
    font-size: 12px;
    line-height: 1.55;
}

.parea-games-hero-emblem {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 219, 255, .68);
    border-radius: 22px;
    background:
        radial-gradient(
            circle,
            rgba(0, 183, 255, .28),
            rgba(96, 31, 195, .16) 50%,
            rgba(10, 21, 40, .95) 74%
        );
    box-shadow:
        0 0 25px rgba(0, 188, 255, .18),
        inset 0 0 25px rgba(80, 44, 255, .13);
    color: #b9fbff;
    font-size: 35px;
}

.parea-games-category {
    margin-bottom: 18px;
}

.parea-games-category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
}

.parea-games-category-title > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.parea-games-category-title .category-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(93, 144, 222, .34);
    border-radius: 10px;
    background: rgba(17, 35, 61, .82);
    font-size: 19px;
}

.parea-games-category-title div div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.parea-games-category-title strong {
    color: #f1f7ff;
    font-size: 15px;
    font-weight: 900;
}

.parea-games-category-title small {
    color: #6f90b8;
    font-size: 10px;
}

.parea-games-grid {
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    display: grid;
    gap: 11px;
}

.parea-games-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.parea-games-grid-5 {
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
}

.parea-game-card {
    position: relative;
    min-width: 0;
    min-height: 135px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 13px 9px 12px;
    border: 1px solid rgba(72, 133, 212, .44);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 49, 81, .98),
            rgba(8, 19, 34, .98)
        );
    box-shadow:
        0 9px 18px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.04);
    color: #fff;
    cursor: pointer;
    isolation: isolate;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.parea-game-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.06),
            transparent 29%
        );
    pointer-events: none;
}

.parea-game-card:hover {
    transform: translateY(-3px);
    border-color: rgba(74, 212, 255, .74);
    box-shadow:
        0 14px 25px rgba(0,0,0,.34),
        0 0 20px rgba(0, 173, 255, .10),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.parea-game-card:active {
    transform: translateY(-1px);
}

.parea-game-card-featured {
    border-color: rgba(255, 189, 49, .78);
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(255, 188, 26, .18),
            transparent 46%
        ),
        linear-gradient(
            145deg,
            #3d2b11,
            #172a42 56%,
            #091624
        );
    box-shadow:
        0 12px 25px rgba(0,0,0,.33),
        0 0 22px rgba(255, 173, 39, .12),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.parea-game-card-featured:hover {
    border-color: #ffd76a;
    box-shadow:
        0 15px 28px rgba(0,0,0,.38),
        0 0 28px rgba(255, 174, 34, .20);
}

.parea-game-card-glow {
    position: absolute;
    width: 130px;
    height: 75px;
    left: 50%;
    top: -33px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 220, 120, .28),
            transparent 68%
        );
    filter: blur(7px);
}

.parea-game-card-icon {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    border: 1px solid rgba(99, 172, 255, .45);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(24, 61, 99, .95),
            rgba(9, 24, 42, .98)
        );
    box-shadow:
        0 10px 22px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.08);
    font-size: 42px;
    line-height: 1;
}

.parea-game-card-featured .parea-game-card-icon {
    border-color: rgba(255, 203, 91, .65);
    background:
        radial-gradient(
            circle,
            rgba(255, 191, 35, .22),
            transparent 66%
        ),
        linear-gradient(
            145deg,
            #4a3512,
            #152942
        );
    box-shadow:
        0 10px 22px rgba(0,0,0,.38),
        0 0 20px rgba(255, 182, 43, .10),
        inset 0 1px 0 rgba(255,255,255,.09);
}

.parea-game-card-title {
    margin-bottom: 3px;
    color: #f7fbff;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.parea-game-card-desc {
    min-height: 26px;
    color: #8ea7c6;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
}

.parea-game-card-meta {
    margin-top: auto;
    padding-top: 7px;
    color: #5de4ff;
    font-size: 9px;
    font-weight: 800;
}

.parea-game-card-featured .parea-game-card-meta {
    color: #ffd65a;
}

.parea-game-card-soon {
    cursor: pointer;
    opacity: .92;
}


/* =========================================================
   SLOT SCREEN V2
========================================================= */

.parea-games-slot-screen {
    min-height: 100%;
}

.parea-slot-topbar {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.parea-games-back,
.parea-games-trophy {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(85, 155, 226, .55);
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            #173966,
            #0a1d32
        );
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 7px 15px rgba(0,0,0,.22);
}

.parea-games-back:hover,
.parea-games-trophy:hover {
    border-color: rgba(61, 217, 255, .82);
    box-shadow:
        0 0 18px rgba(33, 195, 255, .14);
}

.parea-slot-top-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.parea-slot-top-icon {
    font-size: 34px;
}

.parea-slot-top-title div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.parea-slot-top-title strong {
    color: #fff;
    font-size: 22px;
    font-weight: 900;
}

.parea-slot-top-title small {
    color: #8da9c9;
    font-size: 10px;
}

.parea-games-trophy {
    justify-self: end;
    font-size: 20px;
}

.parea-slot-status-title {
    margin: 3px 0 13px;
    color: #d6e2f1;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.parea-slot-status-title span {
    margin-left: 8px;
    color: #77ddff;
}

.parea-slot-machine {
    position: relative;
    width: min(780px, 100%);
    margin: 0 auto 14px;
    padding: 14px 54px 17px;
    border: 2px solid rgba(90, 173, 255, .68);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(255, 44, 225, .22),
            transparent 38%
        ),
        radial-gradient(
            circle at 18% 50%,
            rgba(0, 215, 255, .18),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #172c4b,
            #0a1527 53%,
            #190f30
        );
    box-shadow:
        0 20px 40px rgba(0,0,0,.42),
        0 0 28px rgba(31, 115, 255, .14),
        inset 0 2px 0 rgba(255,255,255,.08);
}

.parea-slot-machine::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255, 70, 238, .46);
    border-radius: 19px;
    pointer-events: none;
}

.parea-slot-machine-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    height: 42px;
    margin-bottom: 10px;
    border-radius: 13px;
    background:
        linear-gradient(
            180deg,
            rgba(17, 17, 37, .95),
            rgba(8, 11, 24, .98)
        );
    color: #82eaff;
    box-shadow:
        inset 0 0 18px rgba(0, 193, 255, .07);
    font-size: 13px;
    letter-spacing: 1.2px;
}

.parea-slot-machine-top strong {
    color: #fff;
    font-size: 19px;
    font-weight: 900;
}

.parea-slot-machine-display {
    position: relative;
    z-index: 2;
    padding: 16px;
    border: 7px solid #4f6380;
    border-radius: 20px;
    background:
        linear-gradient(
            180deg,
            #edf4fb,
            #bbc8d8
        );
    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.55),
        0 7px 19px rgba(0,0,0,.36);
}

.parea-slot-reels-v2 {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 190px;
    overflow: hidden;
    border-radius: 10px;
    background:
        linear-gradient(
            90deg,
            #f5f8fc 0%,
            #d9e1eb 33%,
            #eef3f8 50%,
            #d9e1eb 67%,
            #f7fafc 100%
        );
}

.parea-slot-reel-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border-right: 2px solid rgba(53, 68, 87, .34);
    color: #1c2735;
    font-size: clamp(23px, 4vw, 52px);
    user-select: none;
    text-shadow:
        0 2px 0 rgba(255,255,255,.72);
}

.parea-slot-reel-v2:last-child {
    border-right: 0;
}

.parea-slot-reel-v2.spinning {
    animation:
        pareaSlotReelRoll
        .08s
        linear
        infinite;
}

@keyframes pareaSlotReelRoll {
    0% {
        transform: translateY(-7px);
        filter: blur(1px);
    }

    50% {
        transform: translateY(7px);
        filter: blur(2px);
    }

    100% {
        transform: translateY(-7px);
        filter: blur(1px);
    }
}

.parea-slot-payline {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 73, 214, .95) 12%,
            #ffffff 50%,
            rgba(255, 73, 214, .95) 88%,
            transparent
        );
    box-shadow:
        0 0 13px rgba(255, 73, 214, .48);
    pointer-events: none;
}

.parea-slot-machine-side-glow {
    position: absolute;
    width: 130px;
    height: 260px;
    right: -30px;
    top: 85px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 33, 109, .22),
            transparent 68%
        );
    filter: blur(9px);
    pointer-events: none;
}

.parea-slot-lever {
    position: absolute;
    z-index: 3;
    right: -17px;
    top: 53%;
    width: 40px;
    height: 168px;
    transform: translateY(-50%);
}

.parea-slot-lever-ball {
    position: absolute;
    right: 0;
    top: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 34% 28%,
            #ffdbda,
            #ff5567 37%,
            #cb1135 78%,
            #6d001a
        );
    box-shadow:
        0 0 20px rgba(255, 42, 91, .40),
        inset -5px -6px 8px rgba(88,0,16,.32);
    color: transparent;
}

.parea-slot-lever-stick {
    position: absolute;
    right: 12px;
    top: 28px;
    width: 9px;
    height: 105px;
    border-radius: 9px;
    background:
        linear-gradient(
            90deg,
            #535d69,
            #edf2f7 35%,
            #707b87 67%,
            #343c45
        );
    box-shadow:
        2px 0 7px rgba(0,0,0,.45);
}

.parea-slot-controls {
    width: min(780px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.1fr;
    gap: 10px;
    align-items: stretch;
}

.parea-slot-balance-box,
.parea-slot-bet-box {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(76, 135, 200, .44);
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            #122740,
            #0a1728
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045);
}

.parea-slot-balance-box > span,
.parea-slot-bet-box > span {
    display: block;
    margin-bottom: 5px;
    color: #8da8c6;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.parea-slot-balance-box strong {
    display: block;
    color: #ffd449;
    font-size: 22px;
    font-weight: 900;
}

.parea-slot-bet-row-v2 {
    display: grid;
    grid-template-columns: 37px minmax(0,1fr) 37px;
    gap: 5px;
}

.parea-slot-bet-step-v2 {
    height: 34px;
    padding: 0;
    border: 1px solid rgba(77, 148, 214, .58);
    border-radius: 8px;
    background: #112943;
    color: #f2fbff;
    cursor: pointer;
    font-size: 18px;
}

.parea-slot-bet-step-v2:hover {
    border-color: #53dcff;
}

#pareaSlotBet {
    width: 100%;
    min-width: 0;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid rgba(87, 157, 221, .58);
    border-radius: 8px;
    background: #071321;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    outline: none;
}

#pareaSlotBet:focus {
    border-color: #66dbff;
    box-shadow:
        0 0 0 2px rgba(45, 205, 255, .12),
        0 0 17px rgba(38, 189, 255, .09);
}

.parea-slot-spin-v2 {
    min-width: 0;
    min-height: 70px;
    border: 1px solid rgba(255, 233, 121, .82);
    border-radius: 13px;
    background:
        linear-gradient(
            180deg,
            #fff16e 0%,
            #ffc90f 50%,
            #d79a00 100%
        );
    color: #171514;
    cursor: pointer;
    font-size: 19px;
    font-weight: 1000;
    letter-spacing: .7px;
    box-shadow:
        0 10px 23px rgba(0,0,0,.27),
        0 0 25px rgba(255, 193, 32, .13),
        inset 0 1px 0 rgba(255,255,255,.6);
}

.parea-slot-spin-v2:hover {
    filter: brightness(1.045);
}

.parea-slot-spin-v2:active {
    transform: translateY(1px);
}

.parea-slot-spin-v2:disabled {
    opacity: .58;
    cursor: wait;
}

.parea-slot-result-v2 {
    min-height: 38px;
    width: min(780px, 100%);
    box-sizing: border-box;
    margin: 11px auto 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid rgba(74, 126, 183, .35);
    border-radius: 10px;
    background:
        linear-gradient(
            180deg,
            rgba(13, 31, 53, .92),
            rgba(7, 18, 32, .96)
        );
    color: #b9cde4;
    font-size: 12px;
    text-align: center;
}

.parea-slot-result-v2.win {
    border-color: rgba(67, 235, 161, .46);
    background:
        linear-gradient(
            180deg,
            rgba(17, 78, 60, .45),
            rgba(7, 31, 27, .75)
        );
    color: #7cffb6;
    box-shadow:
        0 0 18px rgba(48, 229, 153, .10);
    font-weight: 900;
}

.parea-slot-result-v2.error {
    border-color: rgba(255, 88, 105, .44);
    background:
        linear-gradient(
            180deg,
            rgba(83, 18, 27, .43),
            rgba(35, 9, 15, .76)
        );
    color: #ff9fa8;
}

.parea-slot-result-v2.lose {
    color: #c1cfdf;
}

.parea-slot-result-v2.spinning-text {
    color: #ffd85c;
}

.parea-slot-presets-v2 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: min(780px, 100%);
    margin: 0 auto 10px;
}

.parea-slot-presets-v2 button {
    height: 31px;
    border: 1px solid rgba(72, 135, 203, .42);
    border-radius: 8px;
    background: #0d2036;
    color: #cfe3f6;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
}

.parea-slot-presets-v2 button:hover {
    border-color: rgba(76, 219, 255, .68);
    background: #112a46;
}

.parea-slot-paytable-v2 {
    width: min(780px, 100%);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 10px 13px;
    border: 1px solid rgba(51, 153, 255, .38);
    border-radius: 12px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 185, 255, .08),
            transparent 48%
        ),
        #091727;
}

.parea-slot-paytable-title {
    margin-bottom: 8px;
    color: #e8f6ff;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.parea-slot-paytable-grid {
    display: grid;
    grid-template-columns: minmax(78px, 1.2fr) repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 6px 11px;
    color: #9fb6d0;
    font-size: 11px;
    text-align: center;
}

.parea-slot-paytable-grid strong {
    color: #ffd74f;
    font-size: 12px;
}

@media screen and (max-width: 900px) {

    .parea-games-window-v2 {
        width: min(760px, calc(100vw - 16px));
    }

    .parea-games-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .parea-slot-machine {
        padding-left: 25px;
        padding-right: 25px;
    }

    .parea-slot-lever {
        display: none;
    }
}

@media screen and (max-width: 640px) {

    .parea-games-body-v2 {
        padding: 11px;
    }

    .parea-games-header {
        min-height: 57px;
        padding-left: 12px;
    }

    .parea-games-header-icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .parea-games-header strong {
        font-size: 15px;
    }

    .parea-games-header-brand span {
        display: none;
    }

    .parea-games-hero {
        min-height: 118px;
        padding: 18px;
    }

    .parea-games-hero-copy h2 {
        font-size: 22px;
    }

    .parea-games-hero-emblem {
        width: 59px;
        height: 59px;
        font-size: 28px;
    }

    .parea-games-grid-3,
    .parea-games-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parea-game-card {
        min-height: 145px;
    }

    .parea-game-card-icon {
        width: 61px;
        height: 61px;
        font-size: 36px;
    }

    .parea-slot-topbar {
        grid-template-columns: 40px minmax(0,1fr) 40px;
    }

    .parea-slot-top-icon {
        font-size: 28px;
    }

    .parea-slot-top-title strong {
        font-size: 18px;
    }

    .parea-slot-machine {
        padding: 10px;
        border-radius: 18px;
    }

    .parea-slot-machine-display {
        padding: 8px;
        border-width: 5px;
    }

    .parea-slot-reels-v2 {
        min-height: 105px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .parea-slot-reel-v2 {
        font-size: clamp(17px, 3.4vw, 36px);
    }

    .parea-slot-paytable-grid {
        grid-template-columns: minmax(62px, 1.1fr) repeat(3, minmax(0, 1fr));
        gap: 5px 4px;
        font-size: 9px;
    }

    .parea-slot-paytable-grid strong {
        font-size: 10px;
    }

    .parea-slot-controls {
        grid-template-columns: 1fr 1fr;
    }

    .parea-slot-spin-v2 {
        grid-column: 1 / -1;
        min-height: 52px;
    }
}


/* =========================================================
   PRIVATE CHAT V5 TOOLBAR
========================================================= */

.private-chat-window {
    width: 430px !important;
    height: 460px !important;

    grid-template-rows:
        42px 42px minmax(0, 1fr) 52px !important;
}


.private-chat-header {
    padding: 0 8px !important;
}


.private-chat-header-user {
    display: flex !important;
    align-items: center !important;

    gap: 7px !important;

    min-width: 0 !important;

    color: #ffffff !important;

    font-size: 14px !important;
}


.private-chat-header-user strong {
    color: #ffd000 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


.private-chat-header-actions {
    display: flex !important;
    align-items: center !important;

    gap: 4px !important;
}


.private-chat-header-actions button {
    width: 30px !important;
    height: 29px !important;

    padding: 0 !important;

    border:
        1px solid
        rgba(255,255,255,.18) !important;

    border-radius: 4px !important;

    background: #08094f !important;
    color: #ffffff !important;

    cursor: pointer !important;
}


/* TOOLBAR */

.private-chat-toolbar {
    display: flex !important;
    align-items: center !important;

    gap: 5px !important;

    padding: 5px 7px !important;

    border-bottom:
        1px solid #a87500 !important;

    background:
        linear-gradient(
            180deg,
            #111923,
            #080d12
        ) !important;
}


.private-chat-toolbar button {
    width: 31px !important;
    height: 30px !important;

    padding: 0 !important;

    border:
        1px solid #394b5b !important;

    border-radius:
        4px !important;

    background:
        linear-gradient(
            180deg,
            #1b2732,
            #0c1319
        ) !important;

    color: #ffffff !important;

    font-size: 16px !important;

    cursor: pointer !important;
}


.private-chat-toolbar button:hover {
    border-color:
        #d6a400 !important;

    background:
        #202d38 !important;
}


#privateFontSize {
    height: 30px !important;

    padding: 0 4px !important;

    border:
        1px solid #394b5b !important;

    border-radius:
        4px !important;

    outline:
        none !important;

    background:
        #0b1218 !important;

    color:
        #ffffff !important;
}


/* MESSAGES */

.private-messages {
    min-height: 0 !important;

    padding:
        9px !important;

    overflow-y:
        auto !important;
}


/* INPUT */

#privateForm {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr) 82px !important;

    gap: 6px !important;

    padding: 7px !important;

    border-top:
        1px solid #b27a00 !important;

    background:
        #05090d !important;
}


#privateInput {
    min-width:
        0 !important;

    padding:
        0 10px !important;

    font-size:
        16px !important;

    outline:
        none !important;

    border:
        1px solid #d0a900 !important;

    border-radius:
        4px !important;

    background:
        #020609 !important;

    color:
        #ffffff !important;
}


#privateForm .private-send-button {
    width:
        auto !important;

    border:
        1px solid #314bc8 !important;

    border-radius:
        4px !important;

    background:
        linear-gradient(
            180deg,
            #2038ca,
            #0b0c70
        ) !important;

    color:
        #ffffff !important;

    font-weight:
        700 !important;

    cursor:
        pointer !important;
}



/* =========================================================
   PAREACLUB AUTH UI
========================================================= */

.auth-box {
    width: 390px;
    max-width: calc(100vw - 32px);
    padding: 28px;
    box-sizing: border-box;
}

.auth-logo {
    font-size: 46px;
    text-align: center;
    margin-bottom: 5px;
}

.auth-box h1 {
    margin: 0;
    text-align: center;
}

.auth-subtitle {
    text-align: center;
    opacity: .65;
    margin-top: 5px;
    margin-bottom: 24px;
}

.auth-panel h2 {
    text-align: center;
    font-size: 18px;
    margin: 0 0 17px;
}

.auth-panel input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0;
}

.auth-password-wrap {
    position: relative;
}

.auth-password-wrap input {
    padding-right: 48px;
}

.auth-eye {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 17px;
}

.auth-primary-btn,
.auth-register-btn {
    width: 100%;
    min-height: 44px;
    margin-top: 13px;
    cursor: pointer;
}

.auth-link-btn {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    margin-top: 13px;
    padding: 7px;
    cursor: pointer;
    font-size: 13px;
}

.auth-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0 5px;
    opacity: .55;
}

.auth-separator::before,
.auth-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: currentColor;
}

.auth-help {
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    opacity: .75;
    margin-bottom: 15px;
}

.auth-message {
    min-height: 20px;
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
}

.auth-error {
    color: #ff6b6b;
}

.auth-success {
    color: #65d889;
}

.auth-primary-btn:disabled,
.auth-register-btn:disabled {
    opacity: .6;
    cursor: wait;
}

@media (max-width: 520px) {

    .auth-box {
        width: calc(100vw - 24px);
        padding: 22px 18px;
    }

}

/* FIX AUTH LINK VISIBILITY */

#forgotPasswordBtn,
#backToLoginFromRegister,
#backToLoginFromForgot,
.auth-link-btn {
    color: #f5f7ff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

#forgotPasswordBtn:hover,
#backToLoginFromRegister:hover,
#backToLoginFromForgot:hover,
.auth-link-btn:hover {
    color: #ffd84d !important;
}

.auth-separator {
    color: #cfd6e6 !important;
    opacity: 1 !important;
}

.auth-separator::before,
.auth-separator::after {
    background: #6f7a8c !important;
}



/* =========================================================
   PAREACLUB DJ SMALLER WINDOW V1
   Desktop / Tablet
========================================================= */

@media screen and (min-width: 651px) {

    #djPlayerWindow,
    .dj-player-window {

        width:
            450px !important;

        max-width:
            calc(100vw - 30px) !important;

        max-height:
            76vh !important;
    }

}



/* =========================================================
   PAREACLUB ROOM PHOTO / BANNER DISPLAY V1
========================================================= */

.chat-panel {

    position:
        relative !important;

}


/*
 * Φωτογραφία / Banner του δωματίου.
 *
 * Εμφανίζεται πάνω στο background,
 * ψηλά στο δωμάτιο.
 */
#pareaRoomBannerImage {

    display:
        none;

    position:
        absolute;

    top:
        52px;

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        auto;

    max-width:
        280px;

    max-height:
        150px;

    object-fit:
        contain;

    z-index:
        7;

    pointer-events:
        none;

    border-radius:
        8px;

    filter:
        drop-shadow(
            0 4px 8px
            rgba(0,0,0,.65)
        );

}


/*
 * Κρατάμε τα μηνύματα λειτουργικά.
 */
#messages {

    position:
        relative;

    z-index:
        8;

}


/*
 * Κινητό
 */
@media screen and (max-width:650px) {

    #pareaRoomBannerImage {

        top:
            42px;

        max-width:
            160px;

        max-height:
            90px;
    }

}


/* =========================================================
   PAREACLUB ROOM LIST IMAGE V2
========================================================= */

.parea-room-name-with-icon {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    min-width:
        0;
}


.parea-room-list-main-icon {

    width:
        21px;

    height:
        21px;

    object-fit:
        contain;

    flex:
        0 0 21px;

    margin-right:
        2px;

    vertical-align:
        middle;
}




/* =========================================================
   PAREACLUB TALK GREEN BUTTON V1
========================================================= */

#talkBtn {
    background: #172033 !important;
    color: #ffffff !important;
    border: 1px solid #475569 !important;
    transition:
        background 0.20s ease,
        border-color 0.20s ease,
        box-shadow 0.20s ease,
        transform 0.15s ease !important;
}


/* TALK ON */
#talkBtn.active {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #4ade80 !important;

    box-shadow:
        0 0 8px rgba(34,197,94,.85),
        0 0 18px rgba(34,197,94,.55) !important;

    transform: scale(1.04);
}


/* μικρό live pulse */
#talkBtn.active {
    animation:
        pareaTalkGreenPulse 1.2s infinite alternate;
}


@keyframes pareaTalkGreenPulse {

    from {
        box-shadow:
            0 0 6px rgba(34,197,94,.65),
            0 0 12px rgba(34,197,94,.35);
    }

    to {
        box-shadow:
            0 0 12px rgba(34,197,94,1),
            0 0 24px rgba(34,197,94,.70);
    }
}

/* ===== PAREACLUB MOBILE CLASSIC V1 START ===== */

/*
 * Classic 3-column mobile layout.
 * Ενεργοποιείται ΜΟΝΟ σε κινητά έως 650px.
 * Desktop / laptop παραμένουν ανέγγιχτα.
 */
@media screen and (max-width:650px) {

    html,
    body {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /*
     * 3 ΣΤΗΛΕΣ:
     * δωμάτια | chat | χρήστες
     */
    .layout {
        width: 100vw !important;
        height: calc(100dvh - 45px) !important;

        display: grid !important;

        grid-template-columns:
            24% minmax(0, 52%) 24% !important;

        grid-template-rows:
            minmax(0, 1fr) !important;

        gap: 2px !important;
        padding: 2px !important;

        overflow: hidden !important;
    }

    /*
     * ΑΡΙΣΤΕΡΑ:
     * rooms επάνω + camera κάτω.
     */
    .left {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: auto !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        display: grid !important;
        grid-template-rows:
            minmax(0, 1fr) 175px !important;

        gap: 2px !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;
        overflow: hidden !important;
    }

    /*
     * ΚΕΝΤΡΟ:
     * κύριο chat.
     */
    .center {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: auto !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        display: block !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;

        overflow: hidden !important;
    }

    /*
     * ΔΕΞΙΑ:
     * users.
     */
    .right {
        grid-column: 3 !important;
        grid-row: 1 !important;

        width: auto !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        display: block !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;

        overflow: hidden !important;
    }

    .panel {
        border-radius: 3px !important;
    }

    /* =========================
       ROOM LIST
       ========================= */

    .rooms-panel {
        width: 100% !important;
        height: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        min-height: 0 !important;
        overflow: hidden !important;
    }

    .panel-title {
        height: 22px !important;
        min-height: 22px !important;

        padding: 0 3px !important;

        font-size: 8px !important;
        line-height: 1 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #roomList {
        flex: 1 1 auto !important;

        min-height: 0 !important;

        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .room-item {
        min-height: 23px !important;

        gap: 2px !important;
        padding: 2px 3px !important;

        font-size: 8px !important;
        line-height: 1.05 !important;

        overflow: hidden !important;
    }

    .room-count {
        min-width: 22px !important;

        padding: 1px 2px !important;

        font-size: 7px !important;

        flex: 0 0 auto !important;
    }

    .parea-room-list-main-icon {
        width: 15px !important;
        height: 15px !important;
        flex: 0 0 15px !important;
        margin-right: 1px !important;
    }

    /* =========================
       CAMERA - ΚΑΤΩ ΑΡΙΣΤΕΡΑ
       ========================= */

    .camera-panel {
        width: 100% !important;
        height: 175px !important;

        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;
    }

    .camera-user {
        min-height: 23px !important;

        gap: 3px !important;
        padding: 2px 4px !important;

        font-size: 8px !important;
    }

    .camera-box {
        flex: 1 1 auto !important;

        min-width: 0 !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    #localVideo {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
    }

    #cameraPlaceholder {
        gap: 2px !important;

        padding: 3px !important;

        font-size: 7px !important;
        text-align: center !important;
    }

    .media-row {
        grid-template-columns: 1fr 1fr !important;

        gap: 2px !important;
        padding: 2px !important;
    }

    .media-row button {
        height: 23px !important;

        padding: 0 2px !important;

        font-size: 7px !important;
    }

    .volume-row {
        min-height: 23px !important;

        gap: 2px !important;
        padding: 2px 3px !important;

        font-size: 7px !important;
    }

    /* =========================
       ΚΥΡΙΟ CHAT
       ========================= */

    .chat-panel {
        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        display: grid !important;

        grid-template-rows:
            25px
            minmax(0, 1fr)
            31px
            38px !important;

        overflow: hidden !important;
    }

    .chat-header {
        min-width: 0 !important;

        padding: 0 4px !important;

        gap: 2px !important;

        font-size: 8px !important;
    }

    .chat-header-right {
        gap: 3px !important;

        min-width: 0 !important;
    }

    #onlineCounter {
        font-size: 7px !important;
    }

    #clearHistoryBtn {
        padding: 2px 3px !important;
        font-size: 7px !important;
    }

    #messages {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 3px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        font-size: 9px !important;
        line-height: 1.18 !important;
    }

    #messages li {
        margin-bottom: 2px !important;

        padding: 3px 4px !important;

        border-radius: 3px !important;

        font-size: 9px !important;
        line-height: 1.18 !important;

        word-break: break-word !important;
    }

    #messages img {
        width: auto !important;

        max-width: 92% !important;
        max-height: 150px !important;

        object-fit: contain !important;
    }

    .message-user {
        margin-right: 2px !important;

        font-size: 9px !important;
    }

    /* =========================
       CHAT TOOLBAR
       ========================= */

    .toolbar {
        min-width: 0 !important;

        gap: 2px !important;
        padding: 2px 3px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;
    }

    .toolbar span,
    .toolbar label {
        font-size: 7px !important;
    }

    .toolbar button,
    .toolbar select {
        height: 24px !important;

        padding: 0 4px !important;

        font-size: 7px !important;

        flex: 0 0 auto !important;
    }

    /* =========================
       MESSAGE INPUT
       ========================= */

    #form {
        width: 100% !important;

        min-width: 0 !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) 58px !important;

        gap: 2px !important;
        padding: 3px !important;
    }

    #input {
        width: 100% !important;

        min-width: 0 !important;

        padding: 0 5px !important;

        font-size: 9px !important;
    }

    #form button {
        min-width: 0 !important;

        padding: 0 2px !important;

        font-size: 7px !important;
    }

    /* =========================
       USERS - ΔΕΞΙΑ
       ========================= */

    .users-panel {
        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        display: grid !important;

        grid-template-rows:
            24px 22px minmax(0, 1fr) 0 !important;

        overflow: hidden !important;
    }

    .tabs {
        min-width: 0 !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

    .tab {
        min-width: 0 !important;

        padding: 0 1px !important;

        font-size: 6px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #usersListUI {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .user-item {
        min-height: 25px !important;

        gap: 3px !important;
        padding: 2px 3px !important;

        overflow: hidden !important;
    }

    .user-status {
        width: 5px !important;
        height: 5px !important;

        flex: 0 0 5px !important;
    }

    .user-avatar {
        width: 18px !important;
        height: 18px !important;

        flex: 0 0 18px !important;

        font-size: 7px !important;
    }

    .user-name {
        min-width: 0 !important;

        font-size: 8px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .users-help {
        display: none !important;
    }

    /*
     * Κανένα panel δεν γίνεται mobile drawer.
     * Όλα μένουν ορατά στις 3 στήλες.
     */
    .left,
    .center,
    .right,
    .rooms-panel,
    .camera-panel,
    .chat-panel,
    .users-panel {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===== PAREACLUB MOBILE CLASSIC V1 END ===== */


/* =========================================================
   PAREACLUB OLD USER CONTEXT MENU DISABLED V1
   Old popup retired. Modern management window remains.
   ========================================================= */

#userContextMenu.parea-old-user-menu-disabled,
.parea-old-user-menu-disabled {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================================================
   PAREACLUB PRIVATE MESSAGES CLEAN V2
   Plain text - no boxes / backgrounds / shadows
========================================================= */

#privateMessages .private-message,
#privateMessages .private-message.mine {
    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
    text-shadow: none !important;

    border-radius: 0 !important;

    margin: 0 0 5px 0 !important;
    padding: 2px 4px !important;

    width: auto !important;
    max-width: 100% !important;

    min-height: 0 !important;
}

/* Όνομα χρήστη */
#privateMessages .private-message-name {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    margin-right: 6px !important;
}

/* Οτιδήποτε υπάρχει μέσα στο μήνυμα */
#privateMessages .private-message span {
    box-shadow: none !important;
}

/* Δεν θέλουμε hover να ξαναβάζει background */
#privateMessages .private-message:hover,
#privateMessages .private-message.mine:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}



/* =========================================================
   PAREACLUB MANAGEMENT NEON V6
   Compact rounded neon management buttons
========================================================= */

.private-admin-body {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 9px !important;

    padding:
        12px 14px 15px !important;

    max-height:
        calc(100dvh - 175px) !important;

    overflow-y:
        auto !important;
}


/* BUTTON BASE */

.private-admin-body
[data-private-admin-action] {

    min-height:
        48px !important;

    height:
        48px !important;

    padding:
        0 13px !important;

    margin:
        0 !important;

    border:
        1px solid
        rgba(106, 104, 255, .60) !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            145deg,
            rgba(21, 31, 55, .97),
            rgba(11, 18, 35, .98)
        ) !important;

    box-shadow:
        inset 0 0 15px
            rgba(62, 83, 255, .08),
        0 0 9px
            rgba(84, 71, 255, .15) !important;

    color:
        #eef5ff !important;

    font-size:
        19px !important;

    font-weight:
        700 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        9px !important;

    cursor:
        pointer !important;

    white-space:
        nowrap !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease !important;
}


.private-admin-body
[data-private-admin-action] span {

    font-size:
        12px !important;

    line-height:
        1 !important;

    color:
        #f2f6ff !important;

    font-weight:
        700 !important;
}


/* HOVER */

.private-admin-body
[data-private-admin-action]:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(87, 199, 255, .95) !important;

    background:
        linear-gradient(
            145deg,
            rgba(24, 40, 70, .98),
            rgba(14, 23, 43, .99)
        ) !important;

    box-shadow:
        inset 0 0 18px
            rgba(38, 154, 255, .10),
        0 0 13px
            rgba(64, 152, 255, .28) !important;
}


/* DANGER */

.private-admin-body
[data-private-admin-action="ban"],
.private-admin-body
[data-private-admin-action="ban_ip"] {

    border-color:
        rgba(255, 77, 105, .65) !important;

    box-shadow:
        inset 0 0 15px
            rgba(255, 47, 82, .06),
        0 0 9px
            rgba(255, 47, 82, .12) !important;
}


/* RADIO / DJ */

.private-admin-body
[data-private-admin-action="radio_toggle"],
.private-admin-body
[data-private-admin-action="dj_toggle"] {

    border-color:
        rgba(163, 84, 255, .65) !important;
}


/* MOBILE */

@media screen and (max-width: 740px) {

    .private-admin-body {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            8px !important;

        padding:
            10px !important;
    }

    .private-admin-body
    [data-private-admin-action] {

        height:
            46px !important;

        min-height:
            46px !important;

        padding:
            0 10px !important;

        font-size:
            18px !important;
    }

    .private-admin-body
    [data-private-admin-action] span {

        font-size:
            11px !important;
    }
}


/* PAREACLUB USER ROW BORDER REMOVE V1 */
.user-item,
.user-item:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   PAREACLUB ROOM PUBLIC / PRIVATE SECTIONS V1
========================================================= */

.parea-room-section-label-v1 {
    padding: 7px 6px 4px;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.4px;
    opacity: 0.82;
    user-select: none;
    pointer-events: none;
}

.parea-room-section-label-v1:first-child {
    margin-top: 0;
}

.parea-room-section-label-v1.private {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 900px) {
    .parea-room-section-label-v1 {
        padding: 5px 3px 3px;
        font-size: 8px;
    }

    .parea-room-section-label-v1.private {
        margin-top: 7px;
    }
}

/* =========================================================
   PAREACLUB VOLUME BAR V1
   Μόνο εμφάνιση — δεν αλλάζει τη λειτουργία του slider.
========================================================= */

.volume-row {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-top: 1px solid #58430f;
    color: #ffb800;
}

.volume-row input[type="range"] {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
    accent-color: #ffb800;
}

.volume-row input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: #273142;
    border: 1px solid #4a3b18;
}

.volume-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border-radius: 50%;
    border: 2px solid #ffd45a;
    background: #ffb800;
    box-shadow:
        0 0 0 2px rgba(0,0,0,.35),
        0 0 8px rgba(255,184,0,.45);
}

.volume-row input[type="range"]::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: #273142;
    border: 1px solid #4a3b18;
}

.volume-row input[type="range"]::-moz-range-progress {
    height: 5px;
    border-radius: 999px;
    background: #ffb800;
}

.volume-row input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #ffd45a;
    background: #ffb800;
    box-shadow:
        0 0 0 2px rgba(0,0,0,.35),
        0 0 8px rgba(255,184,0,.45);
}

#volumeValue {
    min-width: 42px;
    text-align: right;
    font-weight: 700;
    font-size: 12px;
    color: #ffb800;
}


/* =========================================================
   PAREACLUB CHAT ELECTRIC BLUE V1
   Μαύρο φόντο + ηλεκτρικό μπλε περίγραμμα
========================================================= */

.chat-panel {
    box-sizing: border-box !important;

    border: 1px solid #00eaff !important;

    background:
        linear-gradient(
            180deg,
            #05080d 0%,
            #010204 100%
        ) !important;

    box-shadow:
        0 0 4px rgba(0, 234, 255, .85),
        0 0 12px rgba(0, 180, 255, .35),
        inset 0 0 18px rgba(0, 120, 180, .12) !important;
}


/* =========================================================
   PAREACLUB CHAT ELECTRIC BLUE V2
   Κερδίζει το γενικό .panel χωρίς να επηρεάζει άλλα panels.
========================================================= */

.panel.chat-panel {
    box-sizing: border-box !important;

    border: 1px solid #00eaff !important;

    background:
        linear-gradient(
            180deg,
            #03070d 0%,
            #000000 100%
        ) !important;

    box-shadow:
        0 0 5px rgba(0, 234, 255, .95),
        0 0 16px rgba(0, 180, 255, .40),
        inset 0 0 20px rgba(0, 120, 180, .14) !important;
}


.parea-games-screen[hidden] { display: none !important; }

.parea-games-hero { display: none !important; }

.parea-games-window-v2.games-hub-mode {
    width: min(620px, calc(100vw - 24px));
    height: auto;
    max-height: min(560px, calc(100vh - 24px));
}

.parea-games-window-v2.games-game-mode {
    width: min(860px, calc(100vw - 24px));
    height: min(800px, calc(100vh - 24px));
    max-height: min(800px, calc(100vh - 24px));
}


/* Games floating window: Chat remains interactive behind */
.parea-games-modal { pointer-events: none; }
.parea-games-window-v2 { pointer-events: auto; }

/* Games responsive embed */
.parea-games-embed-screen {
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
}

.parea-games-embed-body {
    flex: 1 1 auto;
    min-height: 0 !important;
}

#pareaGamesEmbedFrame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    border: 0;
}

/* Games floating mode: no full-screen visual overlay */
.parea-games-modal {
    background: transparent !important;
    backdrop-filter: none !important;
}

/* Games minimize */
.parea-games-window-v2.games-minimized {
    width: 320px !important;
    height: 58px !important;
    max-height: 58px !important;
}
.parea-games-window-v2.games-minimized .parea-games-body {
    display: none !important;
}

/* Games window controls */
.parea-games-window-controls {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

#pareaGamesMinimize,
#pareaGamesClose {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

#pareaGamesMinimize {
    border: 1px solid rgba(120, 170, 210, .38);
    background: rgba(17, 35, 59, .78);
    color: #d7e8fa;
    font-size: 19px;
    font-weight: 700;
}

#pareaGamesMinimize:hover {
    transform: translateY(-1px);
    border-color: rgba(92, 190, 255, .72);
    background: rgba(27, 57, 91, .92);
    box-shadow: 0 0 16px rgba(46, 176, 255, .16);
}

#pareaGamesClose:hover {
    transform: translateY(-1px);
}

/* Compact header while minimized */
.parea-games-window-v2.games-minimized .parea-games-header {
    min-height: 58px;
    height: 58px;
    padding-left: 13px;
    padding-right: 10px;
    border-bottom: 0;
}

.parea-games-window-v2.games-minimized .parea-games-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 18px;
}

.parea-games-window-v2.games-minimized .parea-games-header strong {
    font-size: 14px;
}

.parea-games-window-v2.games-minimized .parea-games-header-brand span {
    display: none;
}

.parea-games-window-v2.games-minimized #pareaGamesMinimize,
.parea-games-window-v2.games-minimized #pareaGamesClose {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 8px;
}

/* Games resize handle */
.parea-games-resize-handle {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 18px;
    height: 18px;
    z-index: 20;
    cursor: nwse-resize;
    border-radius: 5px;
    opacity: .55;
    background:
        linear-gradient(
            135deg,
            transparent 0 38%,
            rgba(150, 205, 255, .75) 39% 47%,
            transparent 48% 60%,
            rgba(150, 205, 255, .55) 61% 69%,
            transparent 70%
        );
    transition: opacity .15s ease;
}

.parea-games-resize-handle:hover {
    opacity: 1;
}

.parea-games-window-v2.games-minimized .parea-games-resize-handle {
    display: none;
}


/* PAREACLUB DJ ON AIR LABEL V1 */
.user-dj-on-air-v1 {
    display: inline-block;
    margin-left: 6px;
    color: #ff4545;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.6px;
    white-space: nowrap;
    vertical-align: middle;
    text-shadow:
        1px 1px 0 #970000,
        2px 2px 0 #650000,
        3px 3px 0 #350000,
        0 0 5px rgba(255, 35, 35, 0.65);
}


/* PAREACLUB STORE APPEARANCE V1 */

/* Avatar frames */
.user-profile-photo-wrap.pc-item-frame-classic,
.parea-user-profile-card-photo.pc-item-frame-classic,
.parea-user-profile-card-photo-empty.pc-item-frame-classic {
    border: 2px solid #b9c6d8;
    box-shadow: 0 0 0 2px #37445a;
}

.user-profile-photo-wrap.pc-item-frame-neon-cyan,
.parea-user-profile-card-photo.pc-item-frame-neon-cyan,
.parea-user-profile-card-photo-empty.pc-item-frame-neon-cyan {
    border: 2px solid #36e7ff;
    box-shadow: 0 0 9px #36e7ff8c;
}

.user-profile-photo-wrap.pc-item-frame-galaxy,
.parea-user-profile-card-photo.pc-item-frame-galaxy,
.parea-user-profile-card-photo-empty.pc-item-frame-galaxy {
    border: 2px solid #b18cff;
    box-shadow: 0 0 5px #9265ff, 0 0 12px #9265ff80;
}

.user-profile-photo-wrap.pc-item-frame-rose-gold,
.parea-user-profile-card-photo.pc-item-frame-rose-gold,
.parea-user-profile-card-photo-empty.pc-item-frame-rose-gold {
    border: 2px solid #e9a58d;
    box-shadow: 0 0 7px #e9a58d70;
}

.user-profile-photo-wrap.pc-item-frame-emerald,
.parea-user-profile-card-photo.pc-item-frame-emerald,
.parea-user-profile-card-photo-empty.pc-item-frame-emerald {
    border: 2px solid #54e5a2;
    box-shadow: 0 0 8px #54e5a270;
}

.user-profile-photo-wrap.pc-item-frame-crown-obsidian,
.parea-user-profile-card-photo.pc-item-frame-crown-obsidian,
.parea-user-profile-card-photo-empty.pc-item-frame-crown-obsidian {
    border: 2px solid #d8c7ff;
    box-shadow: 0 0 10px #9c77ff;
}

/* Username nameplates */
.user-name.pc-item-nameplate-ocean {
    color: #c8f4ff;
    background: linear-gradient(90deg, #164e70, #243b69);
    border-radius: 5px;
    padding: 2px 6px;
}

.user-name.pc-item-nameplate-midnight {
    color: #e5e7ff;
    background: linear-gradient(90deg, #20263b, #30334b);
    border-radius: 5px;
    padding: 2px 6px;
}

.user-name.pc-item-nameplate-gold {
    color: #ffe7a0;
    background: linear-gradient(90deg, #554018, #30283b);
    border: 1px solid #98763a;
    border-radius: 5px;
    padding: 2px 6px;
}

.user-name.pc-item-nameplate-royal {
    color: #f0dcff;
    background: linear-gradient(90deg, #38245e, #25254c);
    border: 1px solid #7659a7;
    border-radius: 5px;
    padding: 2px 6px;
}

.user-name.pc-item-nameplate-platinum {
    color: #f3f5ff;
    background: linear-gradient(90deg, #444d62, #292e41);
    border: 1px solid #bec9e2;
    border-radius: 5px;
    padding: 2px 6px;
}

/* Theme accents on the user's row */
.user-item.pc-item-theme-skyline {
    box-shadow: inset 2px 0 #56d9ff;
}

.user-item.pc-item-theme-deep-space {
    box-shadow: inset 2px 0 #9580ff;
}

.user-item.pc-item-theme-sunset {
    box-shadow: inset 2px 0 #ff9b78;
}

.user-item.pc-item-theme-aurora-pro {
    box-shadow: inset 2px 0 #70f0cf, inset 4px 0 #8b83ff;
}

/* Small collectible badge accents */
.user-name.pc-item-badge-spark::after {
    content: " ✦";
    color: #ffe28b;
}

.user-name.pc-item-badge-comet::after {
    content: " ☄";
    color: #83eaff;
}