html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


/* 📌 Alapstílusok */
body {
    display: flex;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background: url('/images/roombckg.jpg') no-repeat center center fixed;
    background-size: cover;
}

.room-name.city-room {
  color: #006400 !important;
  font-weight: bold;
}



/* 📌 Konténerek elrendezése */
#contentWrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh;
}

/* 📌 Bal oldali menü (fix sáv) */
#sidebar {
    width: 200px;
    background-color: #102442;
    color: white;
    padding: 15px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
}

#sidebar h4 {
  text-align: center;
  font-weight: 650;       /* kicsit vastagabb */
  margin: 13px 0;         /* szép térköz felül/alul */
  color: #ffffff;         /* ha fix színt szeretnél */
}


#sidebar h3 {
    margin-top: 0;
    text-align: center;
    font-size: 18px;
}


/* 📌 Szobalista gomb – chathez illesztett színekkel */
.styled-button {
    background-color: #1b2a40; /* Sötétkék háttér */
    color: #ffcc66; /* Aranysárga szöveg */
    padding: 0px 0; /* Függőleges térköz marad, oldalirányban nyúljon */
    cursor: pointer;
    width: calc(100% + 20px);
    margin-left: -10px; /* 🔹 Balra tolás */
    margin-right: -10px; /* 🔹 Jobbra tolás */
    height: 35px; /* Gomb magassága */
    font-size: 16px; /* Szöveg mérete */
    font-weight: bold;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.3); /* Árnyék */
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s;
    display: block; /* Biztosítja, hogy szépen kitöltse a helyet */
}

/* 📌 Hover effekt – világosabb háttér */
.styled-button:hover {
    background-color: #283e5b; /* Illeszkedik a chat fejlécéhez */
}

/* 📌 Aktív állapot – kattintáskor */
.styled-button:active {
    background-color: #0f1a2e; /* Még sötétebb árnyalat */
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5); /* Mélységhatás */
}


/* ── Szobatábla: info oszlop ─────────────────────────────────────────────── */
.room-table th.info-col,
.room-table td.info-col {
  width: 40px;
  text-align: center;
  white-space: nowrap;
}

/* Jól látható kerek „i” gomb */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2f80ed;
  color: #fff;
  font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.info-btn:hover {
  transform: translateY(-1px);
  background: #1d6fe3;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
.info-btn:active {
  transform: translateY(0);
}

/* ── Létszám oszlop ───────────────────────────────────────────── */
.room-table th.count-col,
.room-table td.count-col {
  width: 70px;              /* keskenyebb oszlop */
  white-space: nowrap;
}
.room-table td.count-col {
  text-align: left;         /* balra igazítás */
  padding-left: 10px;
}

/* kis badge a számlálóhoz */
.count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  background: #eaf3ff;                  /* világos „pill” */
  color: #0b3d91;
  box-shadow: inset 0 0 0 1px rgba(47,128,237,.35);
}
.count-badge .user-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f80ed;                 /* kis kék pötty */
}



/* 📌 Alap szoba fül – chathez igazított színekkel */
#joinedRooms div {
	flex: 1 1 auto;
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: bold;
    color: #ffcc66; /* Aranysárga szöveg */
    background-color: #1b2a40; /* Sötétebb háttér */
    border: 2px solid #2d3a5a; /* Sötétebb kék keret */
    border-left: 5px solid #444c66; /* Kevésbé feltűnő bal oldali szegély */
    box-shadow: inset 0 -2px 5px rgba(255, 255, 255, 0.15); /* Enyhébb fényhatás */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-bottom: 4px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* 📌 Hover effekt – világosabb háttér */
#joinedRooms div:hover {
    background-color: #283e5b; /* Illeszkedik a chat fejlécéhez */
}

/* 📌 Aktív szoba kiemelése */
#joinedRooms div.active {
    background: linear-gradient(to right, #2b3e5b, #1b2e4b); /* Sötétebb kék színátmenet */
    color: #fff; /* Fehér szöveg */
    border-left: 5px solid #ffcc66; /* Aranysárga szegély */
    box-shadow: inset 0 -2px 5px rgba(255, 255, 255, 0.3); /* Kiemeltebb belső fény */
}





/* 📌 Központi tartalom (Chat és Szobalista) */
#mainContent {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 20px;
    margin-left: 230px; /* Bal oldali sáv szélessége */
    margin-right: 230px; /* Jobb oldali sáv szélessége */
    width: calc(100vw - 460px); /* Teljes nézetablak szélessége - két sáv */
    overflow-y: auto;
    overflow-x: hidden; /* 📌 Megakadályozza a vízszintes görgetést */
    box-sizing: border-box;
}




/* 📌 Chat konténer (Ne legyen szélesebb a kelleténél) */
#chatContainer {
    position: absolute;
    top: 0;
    left: 230px;
    right: 205px;
    height: 100vh;
    background-color: #102442;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
}



#chat {
    width: 100%;
    height: calc(100vh - 150px);
    background: #00214a;
    padding: 10px;
    border-radius: 0;
    overflow-y: auto; /* 📌 Görgetősáv engedélyezése */
    display: flex;
    flex-direction: column-reverse; /* 📌 Új üzenetek mindig alulra kerülnek */
    margin-left: -20px;
    margin-top: 90px;

}

/* 🔹 Görgetősáv beállítása */
#chat::-webkit-scrollbar {
    width: 10px; /* 🔹 Görgetősáv szélessége */
}

/* 🔹 Háttérsáv */
#chat::-webkit-scrollbar-track {
    background: #00214a; /* 🔹 Sötét háttér, illeszkedik a chathez */
    border-radius: 5px;
}

/* 🔹 Görgetősáv színe */
#chat::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #005a99, #0088cc); /* 🔹 Sötétkék -> Világoskék átmenet */
    border-radius: 5px;
    border: 2px solid #003366; /* 🔹 Sötétebb kék keret */
}

/* 🔹 Hover (amikor fölé viszed az egeret) */
#chat::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #007acc, #00aaff); /* 🔹 Világoskék árnyalat hover állapotban */
}




#chat p {
    margin: 1px 0;  /* 🔹 Kis térköz a sorok között */
    padding: 1px 0; /* 🔹 Kis belső térköz */
    line-height: 1; /* 🔹 Optimális sortávolság */
}

#chat span {
  font-weight: bold;
}





/* 🔹 Placeholder stílus */
.custom-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}


/* 🔹 Fókusz animáció */
.custom-input:focus {
    border-color: #0099ff; /* 🔹 Élénkebb kék fókusz */
    background: #18457a; /* 🔹 Kicsit világosabb háttér */
    box-shadow: 0 0 8px rgba(0, 153, 255, 0.6);
}

/* 🔹 Küldés gomb */
.custom-button {
    background-color: #007acc; /* 🔹 Kék háttér */
    color: white;
    font-size: 14px;
    padding: 7px 18px;
    border: 2px solid #007acc;
    border-left: none;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
    min-width: 50px;
    text-align: center;
    font-weight: bold;
}

.custom-button:hover {
    background-color: #0099ff;
}


.custom-button:active {
    background-color: #005f99;
    transform: scale(0.95);

}


/* 🔹 Üzenet mező és gomb elhelyezése */
#messageContainer {
    position: fixed;
    bottom: 0;
    left: 230px;
    right: 200px;
    width: calc(100vw - 450px); /* 🔹 Az eddigi 470px helyett csökkentettük */
    background: #102442;
    padding: 0px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    backdrop-filter: blur(5px);
}


/* 🔹 Mobil reszponzivitás */
@media (max-width: 768px) {
    #messageContainer {
        left: 0;
        right: 0;
        width: 100vw;
        padding: 8px;
    }

    .textInputWrapper {
        max-width: 100%;
    }

    #sendBtn {
        padding: 10px 15px;
        font-size: 14px;
    }
}



/* 📌 Szobalista táblázatos megjelenítése */

#roomListContainer {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}



@media (max-width: 768px) {
    #roomListContainer {
        width: 85%; /* Mobilon szélesebb, hogy kitöltse a helyet */
        max-width: 90%; /* Ne legyen túl kicsi */
        min-width: unset; /* Engedjük, hogy a mobil méretéhez igazodjon */
        left: 50%;
        transform: translateX(-50%); /* Középre igazítás */
        position: relative; /* NE legyen absolute, mert az mobilon elcsúsztathatja */
        margin-top: 20px; /* Adjunk neki kis helyet fentről */
    }

    /* Ha a sidebar miatt tolódik el, finomhangoljuk */
    #mainContent {
        margin-left: 0px; /* Ne toljuk el a sidebar miatt */
        margin-right: 0px;
        width: 100vw; /* Teljes szélesség kihasználása */
    }
}


#roomListContainer h2 {
    text-align: center;
    color: #ffcc66;
    font-weight: bold;
    margin-bottom: 20px;
}

.room-create-title {
    color: #ffcc66;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}


/* 📌 Szobák táblázatos formázása */
.room-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}


.room-table tr:hover {
  background-color: #2a3f70 !important;
  transition: background-color 0.2s ease-in-out;
}
.room-table tr:hover td {
  color: white;
}



.room-table th, .room-table td {
    padding: 10px;
    border-bottom: 1px solid #9bb1ff;
    text-align: left;
}

.room-table th {
    background-color: #3f5eb5;
    color: white;
    font-weight: bold;
    text-align: left;
}

.room-item {
    cursor: pointer;
    transition: background 0.3s;
}


.room-name {
  text-decoration: none !important;
  cursor: pointer;
  color: #e3e8ff;
  font-weight: bold;
}


.room-name:hover {
    text-decoration: underline;
}

.room-topic {
    font-size: 14px;
    color: #555;
	font-weight: bold;
}

.room-count {
  font-weight: bold;
  color: #ffcc66;
}
#rooms .room-table tbody tr:hover td .room-count { color: #FFF8DC !important; }

}


.message strong {
    color: #1f3c78;
}


/* 🔄 Hover esetén a topic szöveg (span, a) is legyen fehér */
.room-table tr:hover .room-topic,
.room-table tr:hover .room-topic span,
.room-table tr:hover .room-topic a {
  color: white !important;
}


/* 🔹 Jelenlévők lista konténer */
#userListContainer {
    position: fixed;
    top: 129px;
    bottom: 0;
    right: 0;
    width: 220px;
    background-color: #102442;
    color: white;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 2px solid #1b3a64;
}


/* 🔹 Felhasználói lista elemei (NICKNÉV FÉLKÖVÉR ÉS BALRA IGAZÍTVA) */
.user-item {
    display: flex; /* 🔹 Rugalmas elrendezés */
    justify-content: flex-start; /* 🔹 Balra igazítás */
    align-items: center;
    padding: 0px;
    transition: background 0.3s;
    cursor: pointer;
    font-weight: bold; /* 🔹 Félkövér szöveg */
    color: #ffffff; /* 🔹 Világos sárga szín */
    text-align: left; /* 🔹 Balra igazítás */
    width: 100%; /* 🔹 Teljes szélességre alkalmazás */
    padding-left: 10px; /* 🔹 Extra bal oldali térköz */
}


/* 🔹 Csevegők doboz (Felhasználók lista tetején) */
#user-header {
    background: linear-gradient(to bottom, #0e355c, #092442); /* Sötétkék gradient */
    color: #fff39c; /* Világos sárga szöveg */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 6px 0;
    border-bottom: 2px solid #1b3a64;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    text-transform: none; /* 🔹 Nem lesz nagybetűs */
}

/* 🔹 Felhasználói lista elemei */
#userList {
    margin-top: 35px; /* 🔹 Térköz, hogy ne fedje le a cím */
}

/* ⛔ Szöveg- és ikon-kijelölés tiltása csak a Jelenlévők listában */
#userListContainer,
#userListContainer * {
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* régi Edge/IE */
  user-select: none;
  -webkit-touch-callout: none;   /* iOS hosszú nyomás menü off */
  -webkit-tap-highlight-color: transparent; /* mobil villanás off */
}

/* ⛔ Ikonok húzhatóságának tiltása */
#userListContainer img {
  -webkit-user-drag: none;
  user-drag: none;
}


.user-item:hover {
    background-color: #2c5bb8;
}
#roomTopicContainer {
    background: linear-gradient(to bottom, #0e355c, #092442);
    color: #fff39c;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    font-family: Arial, sans-serif;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5px 20px;
    border-bottom: 2px solid #1b3a64;
    position: fixed;
    top: 99px;
    left: 230px; /* 📌 Marad változatlanul */
    right: 210px; /* 🔹 Eddig 240px volt, most csökkentve hogy jobbra nyúljon */
    width: calc(100vw - 230px); /* 📌 Kicsit növelve az előzőhöz képest */
    z-index: 900;
    box-sizing: border-box;
    height: 30px;
    line-height: normal;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    text-shadow: none;
}




#roomHeader {
    display: none; /* Alapértelmezetten rejtve marad */
    position: fixed;
    top: 0px; /* Legfelül legyen */
    left: 230px; /* 🔹 Egy kicsit csökkentve bal oldalt */
    width: calc(100% - 270px); /* 🔹 Jobbra nagyobb helyet hagyunk */
    background: #102442;
    color: white;
    font-size: 20px; 
    font-weight: bold;
    padding: 15px 20px;
    z-index: 1000;
    border-bottom: 0px solid #0c1b34;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 🔹 Szöveg balra igazítása */
    height: 69px; /* 🔹 Még nagyobb fejléc */
}

/* 🔹 Szoba neve a fejlécben (balra zárva) */
#currentRoomName {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    padding-left: 20px; /* 🔹 Bal oldalon kis térköz */
}

/* 🔹 Szerepkör címek */
.role-title {
    font-size: 14px;
    font-weight: bold;
    padding: 5px 0;
    border-bottom: 1px solid #444;
    margin-top: 10px;
}
/* COLORS */
:root {
  --softorange: #F4A259;
  --tomatored: #F25C66;
  --mediumblu: #1E272D;
}

body {
  background-color: var(--mediumblu);
}

/* Kilépés gomb (jobb oldalra igazítva) */
.close-container {
    position: absolute;
    right: 20px; /* Jobbra igazítás */
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.leftright,
.rightleft {
  height: 3px;
  width: 35px;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--softorange);
  border-radius: 2px;
  transform-origin: center;
  transition: all .3s ease-in;
}

.leftright {
  transform: translateY(-50%) rotate(45deg);
}

.rightleft {
  transform: translateY(-50%) rotate(-45deg);
}

label.close {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.5em;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all .3s ease-in;
  opacity: 0;
  position: absolute;
  top: 45px;
  left: -8px;
}

.close-container:hover .leftright {
  transform: translateY(-50%) rotate(-45deg);
  background-color: var(--tomatored);
}

.close-container:hover .rightleft {
  transform: translateY(-50%) rotate(45deg);
  background-color: var(--tomatored);
}

.close-container:hover label {
  opacity: 1;
}


/* 📌 Téma módosító modál háttér */
#topicModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Háttér elhalványítás */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* 📌 Modális tartalom - a chat színeivel */
#topicModal .modal-content {
    background: #1b2a40; /* Sötétebb háttér */
    padding: 15px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    width: 350px;
    max-width: 90%;
    text-align: center;
    border: 1px solid #034c8c; /* Kék keret */
}

/* 📌 Modális fejléc (sárga szöveggel) */
#topicModal .modal-header {
    background: #283e5b; /* Háttér marad sötétkék */
    color: #ffcc66; /* Szöveg színe sárga */
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    text-align: center; /* Középre igazított szöveg */
}

/* 🔹 Alapértelmezett szín: ugyanaz, mint a normál topic szövegé */
.clickable-topic {
    color: inherit !important; /* Örökli a szöveg színét */
    text-decoration: none !important; /* Alapból ne legyen aláhúzva */
    cursor: pointer !important;
    transition: color 0.2s ease-in-out;
}

/* 🔹 Ha az egér fölé visszük */
.clickable-topic:hover {
    color: #ffcc66 !important; /* Világosabb sárga, ha fölé visszük */
    text-decoration: underline !important; /* Aláhúzás csak hover-re */
}

#chat a.clickable-topic {
  color: inherit !important;
  text-decoration: none;
  font-weight: bold;
  transition: filter 0.2s ease-in-out;
}

/* 💡 Fontos! A hover állapotban is örökölje a színt */
#chat a.clickable-topic:hover {
  color: inherit !important;
  filter: brightness(1.3);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
}






/* 📌 Bezáró gomb */
#topicModal .close {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

/* 📌 Szövegmező - sötétszürke háttérrel */
#newTopicInput {
    width: 90%;
    padding: 6px;
    margin-top: 10px;
    border-radius: 3px;
    border: 1px solid #034c8c;
    background: #283e5b; /* Sötétszürke mező */
    color: white;
    font-size: 14px;
    text-align: center;
}

/* 📌 Gombok - a chathez igazított színekkel */
.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.modal-buttons button {
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #034c8c;
    background: #034c8c; /* Kék gomb */
    color: white;
    border-radius: 3px;
}

/* 📌 Gomb hover effekt */
.modal-buttons button:hover {
    background: #0266b9; /* Világosabb kék */
}

/* 📌 Broadcast modal – Háttér */
#broadcastModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0); /* Ha átlátszó, maradhat */
    z-index: 9998;
}

/* 📌 Broadcast tartalom – középre igazított ablak */
.broadcast-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 300px;
    max-width: 500px;
    background: #d8e3ff;
    border: 2px solid #3b5998;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 15px;
}

/* 📌 Broadcast beviteli mező */
#broadcastInput {
    width: 95%;
    height: 80px;
    font-size: 16px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
}

/* 📌 Broadcast fejléc */
.broadcast-header {
    background: #3b5998;
    color: white;
    font-weight: bold;
    padding: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* 📌 Broadcast tartalom szöveg + ikon */
.broadcast-body {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 16px;
    color: #1f3c78;
    font-weight: bold;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    max-width: 100%;
    margin: auto;
    flex-wrap: wrap;
    padding: 10px;
}

.broadcast-body p {
    margin: 0;
    flex: 1;
    word-break: break-word;
}

/* 📌 Broadcast ikon */
.broadcast-icon {
    width: 110px;
    height: 110px;
    margin-right: 15px;
    flex-shrink: 0;
}

/* 📌 Broadcast gomb */
#broadcastModal button {
    background: #ffcc66;
    border: 1px solid #c19239;
    color: black;
    font-weight: bold;
    padding: 5px 20px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

#broadcastModal button:hover {
    background: #ffaa00;
}


/* 🚨 FLOOD MODAL – Háttér */
#floodModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 260px;
    max-width: 380px; /* 📌 Egységes méret */
    background: #ffd8d8;
    border: 2px solid #cc0000;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    font-family: Arial, sans-serif;
    padding: 10px;
}

/* 🚨 FLOOD MODAL FEJLÉC */
#floodModal .broadcast-header {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background: #cc0000;
    padding: 8px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
}

/* 🚨 FLOOD MODAL – TARTALOM */
#floodModal .broadcast-body {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    min-height: 70px;
}

/* 🚨 FLOOD MODAL – Kép */
#floodModal .flood-icon {
    width: 45px;
    height: 45px;
    margin-right: 8px;
}

/* 🚨 FLOOD MODAL – Szöveg */
#floodModal p {
    font-size: 15px;
    font-weight: bold;
    color: black;
    text-align: left;
    margin: 0;
    flex-grow: 1;
    white-space: normal; /* 📌 MEGOLDJA A SORTÖRÉST! */
    overflow-wrap: break-word; /* 📌 Hosszú szavak is törnek */
    word-wrap: break-word;
}

/* 🚨 FLOOD MODAL - Gomb */
#floodModal button {
    background: #ff9999;
    border: 1px solid #990000;
    color: black;
    font-weight: bold;
    padding: 5px 15px;
    margin-top: 8px;
    cursor: pointer;
    border-radius: 5px;
    display: block;
    width: 80px;
    margin: 10px auto 0;
}

#floodModal button:hover {
    background: #ff6666;
}





.user-item.selected {
    background-color: rgba(255, 255, 255, 0.1); /* Halványabb háttér */
    border-radius: 4px;
    outline: 1px solid rgba(0, 122, 204, 0.5); /* Vékonyabb kékes körvonal */
    transition: background 0.2s ease-in-out, outline 0.2s ease-in-out;
}


#userIpModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}


/* 📌 IP Lekérdező modal – Háttér */
#userIpModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 300px;
    max-width: 500px;
    background: #d8e3ff;
    border: 2px solid #3b5998;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 15px;
}

/* 📌 IP Lekérdező fejléc */
#userIpModal .broadcast-header {
    background: #3b5998;
    color: white;
    font-weight: bold;
    padding: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* 📌 IP Lekérdező tartalom */
#userIpModal .broadcast-body {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 14px;
    color: #1f3c78;
    font-weight: bold;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    max-width: 100%;
    margin: auto;
    flex-wrap: wrap;
    padding: 10px;
}

#userIpModal .broadcast-body p {
    margin: 0;
    flex: 1;
    word-break: break-word;
}

/* 📌 IP Lekérdező lista */
#userIpModal ul {
    list-style-type: none;
    padding-left: 0;
    text-align: left;
}

#userIpModal ul li {
    background: #f1f1f1;
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #1f3c78;
}

/* 📌 Gomb */
#userIpModal button {
    background: #ffcc66;
    border: 1px solid #c19239;
    color: black;
    font-weight: bold;
    padding: 5px 20px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

#userIpModal button:hover {
    background: #ffaa00;
}

#kickModal { display:none; }



/* 🚫 KITILTÁS MODAL – Háttér */
#banUserModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 320px;
    max-width: 500px;
    background: #d8e3ff; /* Kékes háttér */
    border: 2px solid #3b5998;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 15px;
}

/* 🚫 KITILTÁS MODAL – Fejléc */
#banUserModal .broadcast-header {
    background: #3b5998; /* Facebook kék */
    color: white;
    font-weight: bold;
    padding: 8px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 16px;
}

/* 🚫 KITILTÁS MODAL – Tartalom */
#banUserModal .broadcast-body {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 14px;
    color: #1f3c78;
    font-weight: bold;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    max-width: 100%;
    margin: auto;
    flex-wrap: wrap;
    padding: 10px;
}

/* 🚫 KITILTÁS MODAL – Szöveg */
#banUserModal .broadcast-body p {
    margin: 0;
    flex: 1;
    word-break: break-word;
}

/* 🚫 KITILTÁS MODAL – Kép */
#banUserModal .ban-icon {
    width: 45px; /* 📌 Ikon mérete */
    height: 45px;
    margin-right: 10px;
}

/* 🚫 KITILTÁS MODAL – Rádiógombok */
#banUserModal input[type="radio"] {
    margin-right: 5px;
}

/* 🚫 KITILTÁS MODAL – Gomb */
#banUserModal button {
    background: #ffcc66;
    border: 1px solid #c19239;
    color: black;
    font-weight: bold;
    padding: 5px 20px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

#banUserModal button:hover {
    background: #ffaa00;
}

#banNoticeModal { display: none; }

.user-entry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.role-icon {
    width: 30px;
    height: 30px;
}



/* ⛔ CHATBŐL KITILTÁS MODAL – Háttér */
#banFromChatModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 320px;
    max-width: 500px;
    background: #ffdada; /* Világos pirosas háttér */
    border: 2px solid #cc0000;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 15px;
}

/* ⛔ CHATBŐL KITILTÁS MODAL – Fejléc */
#banFromChatModal .broadcast-header {
    background: #cc0000;
    color: white;
    font-weight: bold;
    padding: 8px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 16px;
}

/* ⛔ CHATBŐL KITILTÁS MODAL – Tartalom */
#banFromChatModal .broadcast-body {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    max-width: 100%;
    margin: auto;
    flex-wrap: wrap;
    padding: 10px;
}

/* ⛔ CHATBŐL KITILTÁS MODAL – Szöveg */
#banFromChatModal .broadcast-body p {
    margin: 0;
    flex: 1;
    word-break: break-word;
}

/* ⛔ CHATBŐL KITILTÁS MODAL – Kép */
#banFromChatModal .ban-icon {
    width: 45px;
    height: 45px;
    margin-right: 10px;
}

/* ⛔ CHATBŐL KITILTÁS MODAL – Rádiógombok */
#banFromChatModal input[type="radio"] {
    margin-right: 5px;
}

/* ⛔ CHATBŐL KITILTÁS MODAL – Gomb */
#banFromChatModal button {
    background: #ff9999;
    border: 1px solid #990000;
    color: black;
    font-weight: bold;
    padding: 5px 20px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

#banFromChatModal button:hover {
    background: #ff6666;
}

/* 🚫 CHATBŐL KITILTÁS MODAL – Háttér */
#chatBanModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 260px;
    max-width: 380px;
    background: #ffd8d8;
    border: 2px solid #cc0000;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    font-family: Arial, sans-serif;
    padding: 10px;
}

/* 🚫 MODAL FEJLÉC */
#chatBanModal .broadcast-header {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background: #cc0000;
    padding: 8px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
}

/* 🚫 CHATBŐL KITILTÁS MODAL – Tartalom */
#chatBanModal .broadcast-body {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    min-height: 70px;
}

/* 🚫 Kép */
#chatBanModal .kick-icon {
    width: 45px;
    height: 45px;
    margin-right: 8px;
}

/* 🚫 Szöveg */
#chatBanModal p {
    font-size: 15px;
    font-weight: bold;
    color: black;
    text-align: left;
    margin: 0;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 🚫 Gomb */
#chatBanModal button {
    background: #ff9999;
    border: 1px solid #990000;
    color: black;
    font-weight: bold;
    padding: 5px 15px;
    margin-top: 8px;
    cursor: pointer;
    border-radius: 5px;
    display: block;
    width: 80px;
    margin: 10px auto 0;
}

#chatBanModal button:hover {
    background: #ff6666;
}

/* 🚫 Invulnerable modal */
#invulnerableModal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

#invulnerableModal.active {
  display: flex !important;
}

#invulnerableModal .modal-content {
  background-color: #ffe6e6;
  padding: 20px 30px;
  border-radius: 12px;
  border: 2px solid #ff4d4d;
  max-width: 400px;
  text-align: center;
  font-weight: bold;
  color: #cc0000;
  font-size: 16px;
  position: relative;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

#invulnerableModal .close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 24px;
  color: #444;
  cursor: pointer;
}



/* ==== Kilépés gomb – dinamikus tok, KÖZÉPEN ==== */
#logoutButtonContainer{
  /* hangolható változók */
  --btn-size: 40px;         /* alap kör átmérő */
  --btn-wide: 140px;        /* hover szélesség */
  --padX: 10px;             /* belső vízszintes padding */
  --gap: 8px;               /* ikon–felirat távolság */
  --label-size: 0.86rem;    /* felirat méret */
  --label-weight: 700;
  --rim: 6px;               /* a „tok” perem vastagsága körben */

  /* a felirat max. szélessége – így nem vágódik le */
  --label-max: calc(var(--btn-wide) - var(--btn-size) - (var(--padX)*2) - var(--gap));

  display: grid;
  place-items: center;
  padding: 10px 0;
  width: 100%;
}

/* csak középre igazítás, nincs fix szélesség – a tok a gombon lesz */
#logoutButtonContainer form{
  margin: 0;
  display: grid;
  place-items: center;
}

/* ===== PIROS GOMB ===== */
#logoutButtonContainer .logout-btn{
  all: unset;
  position: relative;
  display: flex;                 /* ikon + felirat egymás mellett */
  align-items: center;
  justify-content: flex-start;
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  cursor: pointer;

  /* fontos: a tok a gombon kívülre is kilóg – ezért visible */
  overflow: visible;

  transition: width .3s, border-radius .3s, transform .1s, box-shadow .3s, filter .2s;
  box-shadow: 2px 2px 10px rgba(0,0,0,.2);
  background-color: rgb(255, 65, 65);
  padding: 0 var(--padX);
  margin: 0 auto;                /* középre */
}

/* === Dinamikus „tok” a gomb körül – a gombbal együtt nő === */
#logoutButtonContainer .logout-btn::before{
  content: "";
  position: absolute;
  inset: calc(var(--rim) * -1);  /* nagyobb a gombnál 'rim' vastagsággal */
  border-radius: 9999px;
  background: radial-gradient(120% 140% at 30% 25%, #132944, #0c1c30);
  box-shadow:
    0 6px 12px rgba(0,0,0,.35),
    inset 2px 2px 6px rgba(255,255,255,.05),
    inset -4px -4px 10px rgba(0,0,0,.55);
  z-index: -1;                   /* a gomb mögött legyen */
  pointer-events: none;
  transition: box-shadow .2s, filter .2s;
}

/* Tok hover – finoman erősödik */
#logoutButtonContainer .logout-btn:hover::before{
  box-shadow:
    0 8px 14px rgba(0,0,0,.45),
    inset 3px 3px 8px rgba(255,255,255,.06),
    inset -6px -6px 12px rgba(0,0,0,.6);
}

/* Ikon fix helyen */
#logoutButtonContainer .logout-btn__sign{
  flex: 0 0 var(--btn-size);
  display: flex;
  align-items: center;
  justify-content: center;
}
#logoutButtonContainer .logout-btn__sign svg{ width: 15px; height: 15px; display: block; }
#logoutButtonContainer .logout-btn__sign svg path{ fill: #fff; }

/* Felirat – rugalmas, nem csúszik az ikon alá */
#logoutButtonContainer .logout-btn__text{
  margin-left: var(--gap);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;                  /* alapból rejtve */
  opacity: 0;
  flex: 0 1 var(--label-max);
  transition: max-width .3s, opacity .2s .05s;
}

/* Hover – szélesedik, felirat kibomlik; a tok együtt nő a gombbal */
#logoutButtonContainer .logout-btn:hover{
  width: var(--btn-wide);
  border-radius: 9999px;
}
#logoutButtonContainer .logout-btn:hover .logout-btn__text{
  max-width: var(--label-max);
  opacity: 1;
}

/* Kattintás és fókusz */
#logoutButtonContainer .logout-btn:active{ transform: translate(2px, 2px); }
#logoutButtonContainer .logout-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 0 0 6px rgba(255,65,65,.35);
}




.context-menu {
  display: none;
  position: absolute;
  z-index: 9999;
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 5px 0;
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
}

.context-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-menu li {
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.context-menu li:hover {
  background-color: #333;
}


/* ── Layout változó ───────────────────────────────────────────── */
:root { --sidebar-w: 230px; } /* ha a sidebar szélessége változik, itt elég átírni */

/* 🔷 Felső fix sáv – alapból rejtve; JS kapcsolja (flex/none) */
#topBar{
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  height: 70px;
  background: linear-gradient(to right, #102442, #005999);
  color: #fff;
  z-index: 9999;
  box-shadow: 0 10px 16px -10px rgba(0,0,0,.55);

  display: none;                 /* ← alap: rejtve */
  align-items: center;
  justify-content: flex-start;   /* balra zárt tartalom */
  gap: 10px;
  padding-left: 12px;
  text-align: left;
}

/* (Ha inkább osztállyal kezeled)
#topBar.is-visible { display:flex; }
*/

/* 🔧 ADMIN gomb – kompakt, „párna”, benyomódás */
#topBar #adminBtn.admin-btn{
  all: unset;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .40em .72em;          /* méret */
  border-radius: 24px;
  cursor: pointer;
  font-weight: 800;
  font-size: .84rem;
  color: #fff;
  text-shadow: 1px 1px 2px rgb(136 0 136 / 45%);
  background:
    linear-gradient(15deg,#880088,#aa2068,#cc3f47,#de6f3d,#f09f33,#de6f3d,#cc3f47,#aa2068,#880088)
    no-repeat;
  background-size: 300%;
  background-position: left center;
  transition: background .3s ease, transform .08s ease, box-shadow .2s ease, filter .2s ease;
  overflow: visible;             /* a „párna” kilóghat */
  margin-left: 0;                /* balra tapad */
}

/* Sötét „párna” – a gombbal együtt mozog */
#topBar #adminBtn.admin-btn::before{
  content:"";
  position:absolute;
  inset:-5px;                    /* párna vastagság */
  border-radius:9999px;
  background: radial-gradient(120% 140% at 30% 25%, #132944, #0c1c30);
  box-shadow:
    0 6px 12px rgba(0,0,0,.35),
    inset 2px 2px 6px rgba(255,255,255,.05),
    inset -4px -4px 10px rgba(0,0,0,.55);
  z-index:-1;
  pointer-events:none;
  transition: box-shadow .2s ease, filter .2s ease, transform .08s ease;
}

#topBar #adminBtn.admin-btn:hover{
  background-size: 320%;
  background-position: right center;
}
#topBar #adminBtn.admin-btn:hover::before{
  box-shadow:
    0 8px 14px rgba(0,0,0,.45),
    inset 3px 3px 8px rgba(255,255,255,.06),
    inset -6px -6px 12px rgba(0,0,0,.6);
}
/* ⓐ Külön hely a gomb körül */
#topBar #adminBtn.admin-btn{
  margin-left: 10px !important;   /* bal oldali rés */
  margin-right: 10px !important;  /* ha jobb oldalt is kell kis hely */
}

/* ⓑ A „párna” zsugorítása, hogy ne egye meg a rést */
#topBar #adminBtn.admin-btn::before{
  inset: -2px !important;         /* -5px helyett kisebb halo */
}


/* Benyomódási effekt */
#topBar #adminBtn.admin-btn:active{
  transform: translate(1px, 1px);
  filter: brightness(.98);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.08),
    inset 0 -6px 10px rgba(0,0,0,.35);
}
#topBar #adminBtn.admin-btn:active::before{
  box-shadow:
    0 5px 8px rgba(0,0,0,.3),
    inset 2px 2px 5px rgba(255,255,255,.04),
    inset -5px -5px 10px rgba(0,0,0,.55);
  transform: translate(1px, 1px);
}

/* Ikon */
#topBar #adminBtn.admin-btn svg{
  width: 18px; height: 18px;
  fill: #f09f33;
  transition: .3s ease;
}
#topBar #adminBtn.admin-btn:hover svg{ fill:#fff; }






/* USERLISTA KONTAINER */
#globalUserlistContainer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 0;
    position: absolute;
    top: 70px;
    left: 230px;
    height: calc(100vh - 70px);
    width: calc(100vw - 230px);
    box-sizing: border-box;
    overflow: hidden;
    z-index: 10;
}

/* BAL OLDALI DOBOZ - Felhasználók */
.global-userlist-box {
    background-color: #1a1f3c;
    padding: 20px;
    width: 300px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
}

/* Fejléc */
#globalUserlistHeader {
    background-color: #282c4d;
    padding: 12px 16px;
    margin: 0;
    color: #e0d2ff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

/* Lista */
#globalUserlist {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* Egyes felhasználó (globális lista csempe) */
.user-card {
    display: flex;
    align-items: center;      /* függőleges középre igazítás */
    font-size: 16px;
    color: #fff;
    padding: 2px 0;
    line-height: 1;           /* nagyon fontos a baseline-hoz */
}



.user-card img.role-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;         /* 🔥 ez a finomhangolás hozza egy vonalba */
}



/* JOBB OLDALI INFOBOX */
.user-info-box {
    background-color: #102442;
    padding: 20px 30px;
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
    color: #fff;
    box-shadow: none;
    flex-grow: 1;
    min-width: 0;
    box-sizing: border-box;
}

.info-box-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #e0d2ff;
}

#userInfoContent {
    font-size: 14px;
    line-height: 1.6;
}


/* USERKERESŐ */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  font-family: Arial, sans-serif;
}

.modal-box {
  background: #d8e3ff;
  border: 2px solid #3b5998;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  width: 550px;
  max-width: 90vw;
}


.modal-header {
  background: #3b5998;
  color: white;
  font-weight: bold;
  font-size: 15px;
  padding: 6px 10px;         /* 🔽 kisebb belső tér */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-align: left;          /* ugyanaz, mint a többinél */
  margin-bottom: 8px;        /* 🔽 ez teszi kicsit lejjebb a tartalomhoz képest */
}



.modal-body {
  padding: 20px;
  text-align: left;
  background-color: #e0e6f4;
}

.modal-body input[type="text"] {
  width: 90%;
  padding: 10px;
  font-size: 14px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.modal-body button {
  background: #ffcc66;
  border: 1px solid #c19239;
  color: black;
  font-weight: bold;
  padding: 6px 16px;
  font-size: 13px;
  margin: 8px auto;
  cursor: pointer;
  border-radius: 5px;
  display: block;
}

.modal-body button:hover {
  background: #ffaa00;
}

.modal-body .close-btn {
  background-color: #f55;
  border-color: #a00;
  color: white;
}

.button-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

.button-row button {
  padding: 6px 20px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #c19239;
  background: #ffcc66;
  color: black;
}

.button-row .close-btn {
  background-color: #f55;
  border-color: #a00;
  color: white;
}

.button-row button:hover {
  background: #ffaa00;
}

.button-row .close-btn:hover {
  background: #e22;
}

#userSearchResult {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  text-align: center;
}

.modal-box.search-box {
  background: #e0e6f4 !important;
  padding: 15px 20px !important;
  border: 2px solid #395598;
  border-radius: 10px;
  width: 400px !important;
  max-width: 90vw;
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


#createRoomBox {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  margin-top: 40px;
  margin-left: 0; /* balra igazítás */
  width: 500px;
}

#createRoomBox input {
  border-radius: 6px;
  border: 1px solid #ccc;
}
#createRoomBox button {
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  background-color: #1a237e;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
#createRoomBox button:hover {
  background-color: #3949ab;
}
.userlist-cover {
  background-color: #0d1f3c;
  position: fixed;
  top: 70px;
  left: 230px;             /* 💡 eltoljuk jobbra, hogy ne lógjon rá a sidebarra */
  width: calc(100vw - 230px); /* 💡 csökkentjük a teljes szélességet, hogy ne lógjon túl */
  height: calc(100vh - 70px);
  z-index: 10;
  border-radius: 0;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.room-table tr.adult {
  background-color: #ffe36e;
  color: #111;
  font-weight: bold;
}

.room-table tr.adult:hover {
  background-color: #ffdb4d;
}

.room-name.adult {
  font-weight: bold;
}
.featured-room {
    background-color: #ff4d4d !important;
}

.city-name {
  color: #006400;      /* zöld */
  font-weight: bold;
}

.temporary-name {
  color: #000000;     /* fekete */
  font-weight: bold;
}


/* Sorszín hoverre */
.room-table tr:hover {
    background-color: #1b335c; /* sötétkék hover */
}

/* Szövegek váltása hoverkor – szoba neve, létszám */
.room-table tr:hover td {
    color: #ffffff;
}

/* Külön a topic cellán belüli <span> vagy <a> is fehér legyen */
.room-table tr:hover .room-topic span,
.room-table tr:hover .room-topic a {
    color: #ffffff !important;
}

/* 🔔 Új üzenet jelzés másik szobában */
.room-tab.unread .room-tab-label {
  color: red !important;
  font-weight: bold;
}

/* Megmarad az alap tab stílus */
.room-tab {
  background-color: #2e3a4d;
  color: #ffcc66;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 5px;
}



#privateChatTabs .room-button {
  background: #2e2e2e;
  color: #ffdbdb;
  padding: 6px 10px;
  margin: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  
  
}
#privateChatWindow {
  display: none;
  position: fixed;
  bottom: 60px;
  right: 30px;
  width: 320px;
  height: 420px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px #00000060;
  z-index: 9999;
  flex-direction: column;
  border: 2px solid #102442;
}

.tab {
  padding: 6px 10px;
  margin: 4px 0;
  background: #2e3b55;
  color: #ffd57a;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}
.tab:hover {
  background: #3f4e6a;
}

.private-tab-unread {
  color: #ff0000 !important;
  font-weight: bold;
}

#privateChatMessages div {
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* 🎬 YouTube Modal*/
#youtubeModal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #d8e3ff;
  border: 2px solid #3b5998;
  border-radius: 10px;
  z-index: 9999;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  min-width: 500px;
  max-width: 90%;
  text-align: center;
}

/* 🎬 Modal fejléc (húzható rész) */
.youtube-header { touch-action: none; }
  background: #3b5998;
  color: white;
  font-weight: bold;
  padding: 6px 10px;
  cursor: move;
  border-radius: 6px 6px 0 0;
  user-select: none;
  margin-bottom: 10px;
}

/* 🎬 Lejátszó iframe */
#youtubeIframe {
  width: 100%;
  height: 315px;
  border: none;
  border-radius: 6px;
}

/* 🎬 Láb (gomb alá) */
.youtube-footer {
  margin-top: 10px;
}

/* 🎬 Bezárás gomb */
.youtube-footer button {
  background: #ffcc66;
  border: 1px solid #c19239;
  color: black;
  font-weight: bold;
  padding: 5px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.youtube-footer button:hover {
  background: #ffaa00;
}


/* 🔞 18+ BELÉPÉS MODAL – Kisebb méretben */
#adultConfirmModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 220px;
    max-width: 300px; /* 🔽 Csökkentett szélesség */
    background: #ffd8d8;
    border: 2px solid #cc0000;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    font-family: Arial, sans-serif;
    padding: 10px;
}

/* 🔞 Fejléc */
#adultConfirmModal .broadcast-header {
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background: #cc0000;
    padding: 6px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
}

/* 🔞 Tartalom */
#adultConfirmModal .broadcast-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

/* 🔞 Ikon */
#adultConfirmModal .kick-icon {
    width: 90px;   /* 🔽 kisebb ikon */
    height: 90px;
    margin-bottom: 8px;
}

/* 🔞 Szöveg */
#adultConfirmModal p {
    font-size: 14px;
    font-weight: bold;
    color: black;
    text-align: center;
    margin: 0;
    white-space: normal;
    word-break: break-word;
}

/* 🔞 Gomb */
#adultConfirmModal button {
    background: #ff9999;
    border: 1px solid #990000;
    color: black;
    font-weight: bold;
    padding: 4px 10px;
    margin-top: 8px;
    cursor: pointer;
    border-radius: 5px;
    display: inline-block;
    width: 80px;
    margin: 6px;
}

#adultConfirmModal button:hover {
    background: #ff6666;
}



.input-with-icon {
    position: relative;
    flex: 1;
}

.input-with-icon .custom-input {
    padding-right: 95px; /* hely a GIF és a Küldés ikonoknak */
    width: 100%;
}

.gif-icon-btn,
.send-icon-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #0e355c;
    border: 1px solid #007acc;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
}

.gif-icon-btn {
    right: 45px; /* GIF balra kerül a küldés gombtól */
    color: white;
    font-size: 12px;
}

.send-icon-btn {
    right: 5px;
    padding: 3px;
}

.send-icon-btn img {
    display: block;
    width: 18px;
    height: 18px;
}

/* 🔹 Egyszerű, dizájnos üzenet beviteli mező */
.custom-input {
    flex: 1; /* csak a maradék helyet tölti ki */
    padding: 7px 14px;
    font-size: 14px;
    color: white;
    background: #0e355c; /* 🔹 Mélyebb kék háttér */
    border: 2px solid #007acc; /* 🔹 Világoskék keret */
    border-radius: 5px; /* teljesen körbe zárt */
    outline: none;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box; /* padding + border beleszámít a szélességbe */
}



/* 🔹 GIF kereső háttér (sötét átlátszó overlay) */
#gifPickerOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none; /* alapértelmezett */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* 🔹 Felugró keresődoboz */
#gifPicker {
    background: #1e1e2f;
    border-radius: 10px;
    width: 520px;
    max-width: 95vw;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
}

.gif-in-msg {
    max-width: 240px;
    max-height: 240px;
    display: block;
    border-radius: 8px;
    margin: 4px 0;
}


/* 🔹 Felső kereső sor */
.gif-picker-header {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.gif-picker-header input {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #444;
    background: #111;
    color: #fff;
}

/* 🔹 Bezáró gomb */
#gifCloseBtn {
    background: #aa0000;
    border: none;
    color: white;
    font-size: 18px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}

/* 🔹 Találati grid */
.gif-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

.gif-results img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gif-results img:hover {
    transform: scale(1.05);
}


/* === Kör alakú ikon gombok (neumorf, sötét téma) === */
#roomHeader {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Kör alakú, besüllyesztett hatás KÉP-re – a képméretet nem bántjuk */
.icon-neo {
  display: inline-block;
  border-radius: 50%;
  /* a háttér a PNG átlátszó részein látszik – ettől lesz „tokban” a kép */
  background: radial-gradient(120% 140% at 30% 25%, #132944, #0c1c30);
  /* külső árnyék + belső fény/sötét perem = „neumorf” hatás */
  box-shadow:
    0 10px 16px rgba(0,0,0,.45),
    inset 2px 2px 6px rgba(255,255,255,.06),
    inset -4px -4px 10px rgba(0,0,0,.5);
  /* a tartalom enyhe mélységet kap */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
  transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
  /* FONTOS: NINCS width/height itt -> az eredeti (inline) méret marad! */
}

/* Hover – picit kiemelkedik és fényesebb a perem */
.icon-neo:hover {
  box-shadow:
    0 12px 18px rgba(0,0,0,.5),
    inset 3px 3px 7px rgba(255,255,255,.08),
    inset -5px -5px 12px rgba(0,0,0,.55);
  filter: brightness(1.03) drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

/* Aktív/lenyomott – mintha benyomódna */
.icon-neo:active {
  transform: translateY(1px);
  box-shadow:
    0 6px 10px rgba(0,0,0,.35),
    inset -2px -2px 6px rgba(255,255,255,.05),
    inset 6px 6px 12px rgba(0,0,0,.65);
  filter: brightness(.98) drop-shadow(0 0 0 rgba(0,0,0,0));
}

/* Kapcsolt/Toggled állapot (ha valami be/ki van kapcsolva) */
.icon-neo[data-state="on"] {
  background: radial-gradient(120% 140% at 30% 25%, #143152, #0f2340);
  box-shadow:
    0 12px 18px rgba(0,0,0,.55),
    inset 4px 4px 10px rgba(0,190,255,.14),
    inset -6px -6px 14px rgba(0,0,0,.6);
}

/* Letiltott megjelenítés (ha nem display:none, csak inaktív) */
.icon-neo[disabled] {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(50%);
}


/* ===== Beállítások modal fixek ===== */
#settingsModalBox{
  width: 640px;                    /* fix(ebb) szélesség */
  max-width: min(95vw, 640px);     /* kis kijelzőn se folyjon ki */
  box-sizing: border-box;
}
#settingsModalBox .modal-body{
  padding: 12px 14px;
}

/* Szöveges inputok/textarea-k ne lógjanak túl */
#settingsModalBox input[type="text"],
#settingsModalBox textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;          /* << ez a lényeg */
}

/* Textarea kényelmesebb és csak függőlegesen méretezhető */
#settingsModalBox textarea{
  min-height: 110px;
  resize: vertical;
  overflow: auto;
}

/* Ha bármi flex/grid sorban van, ne feszüljenek túl */
#settingsModalBox *{
  min-width: 0;
}

/* Disabled kinézet (auto-join mező) */
#settingsModalBox input[disabled],
#settingsModalBox textarea[disabled]{
  background: #f0f2f5;
  color: #777;
  cursor: not-allowed;
}

/* Két-hasábos sor-elosztás opció (ha szeretnéd a prefix/szín sort szebben) */
#settingsModalBox .flex-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
#settingsModalBox .flex-row label{ white-space: nowrap; }
@media (max-width: 480px){
  #settingsModalBox{ width: auto; }
  #settingsModalBox .flex-row{ grid-template-columns: 1fr; }
}

/* Ignorált felhasználó a jelenlévők listában */
#userList .user-item.ignored {
  opacity: 0.55;
  filter: grayscale(1);
}
#userList .user-item.ignored .username::before {
  content: "🙈 ";
  opacity: 0.9;
}

/* === ROOMLIST – modern panel + táblázat facelift ======================= */
#rooms {
  position: relative;
  background: transparent;           /* maga a szöveg réteg átlátszó */
}
#rooms::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(16, 36, 66, 0.65);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 0;
}
#rooms > * { position: relative; z-index: 1; }




/* Fejléc ragadós + szebb címkék */
.room-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.room-table thead th,
.room-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #3f5eb5, #2f4b91);
  color: #fff;
  text-transform: none;
  letter-spacing: .2px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* Zebra + hover */
.room-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.room-table tr { transition: background-color .18s ease, transform .08s ease; }

/* ne színezze fehérre az összes cellát hoverkor */


.room-table th, .room-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(155,177,255,0.25);
  text-align: left;
  vertical-align: middle;
}

/* Szoba neve + belépés vizuális */
.room-name .room-entry {
  display: inline-block;
  font-weight: 550;
  color: #e3e8ff; /* alap szín (felülírjuk kategóriával) */
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .15s ease, transform .06s ease;
}
.room-name .room-entry:hover { background: rgba(255,255,255,0.06); }
/* link állapotok ne változtassák meg a színt */
.room-name .room-entry:link,
.room-name .room-entry:visited,
.room-name .room-entry:hover { color: inherit; }

/* (2) Szobanév színezése kategória szerint */
.cat-registered .room-name .room-entry { color: #4080ff; } /* állandó – kék */
.cat-city       .room-name .room-entry { color: #008000; } /* city – zöld */
.cat-temporary  .room-name .room-entry { color: #FFF8DC; } /* ideiglenes – szürke */



/* Kategória vizuális csík a sor bal szélén */
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; opacity: .9;
}
.room-table tr.cat-registered::before { background: #5c7cff; }
.room-table tr.cat-city::before       { background: #4ecb71; }
.room-table tr.cat-temporary::before  { background: #a0a0a0; }

/* 18+ finom jelölés */
.room-table tr.adult-room .room-entry { color: #DAA520; }

/* Kiemelt szoba: piros csík + pulzáló pötty a sor elején */
.room-table tr.featured-room::before { background: #ff4d4d; }
.room-table tr.featured-room .room-name { position: relative; }
.room-table tr.featured-room .room-name::before {
  content: "";
  position: absolute; left: -14px; top: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px; background: #ff4d4d; border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(255,77,77,0.7);
  animation: featuredPulse 1.8s infinite;
}
@keyframes featuredPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,77,77,0.7); }
  70%{ box-shadow: 0 0 0 12px rgba(255,77,77,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,77,77,0); }
}

/* Éppen bent lévő szoba sorának jelzése (in-room) */
.room-table tr.in-room {
  outline: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
}

/* (3) Téma legyen fekete – hoverkor is maradjon az */
#rooms .room-topic,
#rooms .room-topic * { color: #ffcc66 !important; }
#rooms .room-table tr:hover .room-topic,
#rooms .room-table tr:hover .room-topic * { color: #FFF8DC !important; }






/* === Chat Log Modal === */
.logmodal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  display: none;
}
.logmodal__dialog{
  width: min(900px, 92vw);
  height: min(70vh, 820px);
  margin: 5vh auto;
  background: #00214a; /* kért háttér */
  color: #e8f0ff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
}
.logmodal__header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.logmodal__title{ font-weight:600; }
.logmodal__close{
  all: unset; cursor: pointer; padding: 6px 10px; border-radius: 8px;
}
.logmodal__close:hover{ background: rgba(255,255,255,.08); }
.logmodal__body{ padding: 10px 14px; flex: 1; }
#chatLogText{
  width: 97.5%; height: 94%;
  background: #001631; color:#e8f0ff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 10px;
  font-family: monospace;
  font-size: 13px; line-height: 1.4; resize: none;
}
.logmodal__footer{
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.08);
}
.logmodal__btn{
  background: #0f5fd7; color: #fff; border: none; border-radius: 10px;
  padding: 8px 14px; cursor: pointer; font-weight:600;
}
.logmodal__btn:hover{ filter: brightness(1.08); }

/* === APP LOADER OVERLAY === */
.app-loader{
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  background: #00214a;            /* kérés szerinti háttér */
  opacity: 1; pointer-events: all;
  transition: opacity .35s ease, visibility .35s ease;
}
.app-loader.hide{
  opacity: 0; pointer-events: none; visibility: hidden;
}
.app-loader__card{
  display: grid; gap: 14px; place-items: center;
  padding: 24px 28px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  color: #e8f0ff;
  min-width: 220px;
}
/* minimal spinner */
.app-loader__spinner{
  width: 34px; height: 34px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #e8f0ff;
  border-radius: 50%;
  animation: appSpin 0.9s linear infinite;
}
@keyframes appSpin { to { transform: rotate(360deg); } }
.app-loader__text{
  font-weight: 600; letter-spacing: .2px;
}



#user-header .badge{
  margin-left:6px;
  padding:2px 6px;
  border-radius:10px;
  font-weight:700;
  background:#1b3a6a;
  border:1px solid rgba(255,255,255,.25);
}
#globalUserlistHeader .global-count{
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
  background: #1b3a6a;
  border: 1px solid rgba(255,255,255,.25);
}




/* =========================================================
   PIROS MODAL SKIN – egységes megjelenés minden modálhoz
   Alkalmazva: #explodeModal, #kickModal, #chatKickModal,
               #banNoticeModal, #banAttemptModal, #selfKickModal
   ========================================================= */

:root{
  --modal-red:  #c60000;
  --modal-body: #ffe3e6;
}

/* Test (rózsaszín doboz + piros keret) */
#explodeModal .broadcast-content,
#kickModal .broadcast-content,
#chatKickModal .broadcast-content,
#banNoticeModal .broadcast-content,
#banAttemptModal .broadcast-content,
#selfKickModal .broadcast-content{
  background: var(--modal-body);
  border: 2px solid var(--modal-red);
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.15);
  width: auto; min-width: 300px; max-width: 500px;
  padding: 0; /* a header/body/actions kap külön paddinget */
  font-family: Arial, sans-serif;
  z-index: 9999;
}

/* Fejléc – piros sáv, teljes szélesség */
#explodeModal .broadcast-header,
#kickModal .broadcast-header,
#chatKickModal .broadcast-header,
#banNoticeModal .broadcast-header,
#banAttemptModal .broadcast-header,
#selfKickModal .broadcast-header{
  background: var(--modal-red);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 12px;
  border-radius: 8px 8px 0 0;
  letter-spacing: .3px;
}

/* Törzs + ikon elrendezés */
#explodeModal .broadcast-body,
#kickModal .broadcast-body,
#chatKickModal .broadcast-body,
#banNoticeModal .broadcast-body,
#banAttemptModal .broadcast-body,
#selfKickModal .broadcast-body{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

/* Alap ikonméret (ha kell, felülírjuk lejjebb) */
#explodeModal .broadcast-icon,
#kickModal .broadcast-icon,
#chatKickModal .broadcast-icon,
#banNoticeModal .broadcast-icon,
#banAttemptModal .broadcast-icon,
#selfKickModal .broadcast-icon{
  width: 100px;
  height: auto;
  flex: 0 0 auto;
}

/* Gombsor középre */
#explodeModal .broadcast-actions,
#kickModal .broadcast-actions,
#chatKickModal .broadcast-actions,
#banNoticeModal .broadcast-actions,
#banAttemptModal .broadcast-actions,
#selfKickModal .broadcast-actions{
  display: flex;
  justify-content: center;
  padding: 8px 0 14px;
}

/* =========================
   MODAL OK GOMB – egységes
   ========================= */

.modal-actions{ text-align: center; }

.modal-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 6px;
  background: #e53935;   /* piros téglalap */
  color: #fff;
  border: 2px solid #fff;/* fehér keret */
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 0 rgba(0,0,0,.08);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.modal-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.modal-btn:active{ transform: translateY(0); }
.modal-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 0 0 6px rgba(229,57,53,.35);
}

/* Fallback: ha valahol még sima <button> maradt a .broadcast-content-ben,
   ugyanilyen kinézetet kap (class csere nélkül is) */
#explodeModal .broadcast-content button:not(.modal-btn),
#kickModal .broadcast-content button:not(.modal-btn),
#chatKickModal .broadcast-content button:not(.modal-btn),
#banNoticeModal .broadcast-content button:not(.modal-btn),
#banAttemptModal .broadcast-content button:not(.modal-btn),
#selfKickModal .broadcast-content button:not(.modal-btn){
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 6px;
  background: #e53935;
  color: #fff;
  border: 2px solid #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 0 rgba(0,0,0,.08);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
#explodeModal .broadcast-content button:not(.modal-btn):hover,
#kickModal .broadcast-content button:not(.modal-btn):hover,
#chatKickModal .broadcast-content button:not(.modal-btn):hover,
#banNoticeModal .broadcast-content button:not(.modal-btn):hover,
#banAttemptModal .broadcast-content button:not(.modal-btn):hover,
#selfKickModal .broadcast-content button:not(.modal-btn):hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}
#explodeModal .broadcast-content button:not(.modal-btn):active,
#kickModal .broadcast-content button:not(.modal-btn):active,
#chatKickModal .broadcast-content button:not(.modal-btn):active,
#banNoticeModal .broadcast-content button:not(.modal-btn):active,
#banAttemptModal .broadcast-content button:not(.modal-btn):active,
#selfKickModal .broadcast-content button:not(.modal-btn):active{
  transform: translateY(0);
}
#explodeModal .broadcast-content button:not(.modal-btn):focus-visible,
#kickModal .broadcast-content button:not(.modal-btn):focus-visible,
#chatKickModal .broadcast-content button:not(.modal-btn):focus-visible,
#banNoticeModal .broadcast-content button:not(.modal-btn):focus-visible,
#banAttemptModal .broadcast-content button:not(.modal-btn):focus-visible,
#selfKickModal .broadcast-content button:not(.modal-btn):focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 0 0 6px rgba(229,57,53,.35);
}

/* Rules oldal modálok (pl. Kirúgtak a chatből) – csak a GOMB egységesítése,
   hogy a szabályzat modál kinézetét ne borítsuk el */
.rulesModal .broadcast-actions{
  display:flex;
  justify-content:center;
  padding:8px 0 14px;
}
.rulesModal .broadcast-content button:not(.modal-btn){
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 6px;
  background: #e53935;
  color: #fff;
  border: 2px solid #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 0 rgba(0,0,0,.08);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.rulesModal .broadcast-content button:not(.modal-btn):hover{ filter:brightness(1.06); transform:translateY(-1px); }
.rulesModal .broadcast-content button:not(.modal-btn):active{ transform:translateY(0); }
.rulesModal .broadcast-content button:not(.modal-btn):focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.5), 0 0 0 6px rgba(229,57,53,.35);
}

/* Modal szöveg színe: legyen fekete (a félkövér marad) */
#explodeModal .broadcast-body,
#kickModal .broadcast-body,
#chatKickModal .broadcast-body,
#banNoticeModal .broadcast-body,
#banAttemptModal .broadcast-body,
#selfKickModal .broadcast-body,
#explodeModal .broadcast-body p,
#kickModal .broadcast-body p,
#chatKickModal .broadcast-body p,
#banNoticeModal .broadcast-body p,
#banAttemptModal .broadcast-body p,
#selfKickModal .broadcast-body p{
  color:#000;
}

/* Régi „ferde sávos” gomb-elemek kikapcsolása, ha maradtak */
#explodeModal .broadcast-content .button_sl,
#explodeModal .broadcast-content .button_lg::before,
#explodeModal .broadcast-content .button_lg::after,
#kickModal .broadcast-content .button_sl,
#kickModal .broadcast-content .button_lg::before,
#kickModal .broadcast-content .button_lg::after,
#chatKickModal .broadcast-content .button_sl,
#banNoticeModal .broadcast-content .button_sl,
#banAttemptModal .broadcast-content .button_sl,
#selfKickModal .broadcast-content .button_sl{
  display: none !important;
}

/* === MODAL COMPACT OVERRIDE – kisebb doboz, ikon és padding === */
#explodeModal .broadcast-content,
#kickModal .broadcast-content,
#chatKickModal .broadcast-content,
#banNoticeModal .broadcast-content,
#banAttemptModal .broadcast-content,
#selfKickModal .broadcast-content{
  min-width: 260px;
  max-width: 380px;    /* korábban 500px */
}

#explodeModal .broadcast-header,
#kickModal .broadcast-header,
#chatKickModal .broadcast-header,
#banNoticeModal .broadcast-header,
#banAttemptModal .broadcast-header,
#selfKickModal .broadcast-header{
  padding: 8px 12px;   /* kicsit kompaktabb */
}

#explodeModal .broadcast-body,
#kickModal .broadcast-body,
#chatKickModal .broadcast-body,
#banNoticeModal .broadcast-body,
#banAttemptModal .broadcast-body,
#selfKickModal .broadcast-body{
  padding: 12px 14px;  /* kicsit kisebb padding */
}

#explodeModal .broadcast-icon,
#kickModal .broadcast-icon,
#chatKickModal .broadcast-icon,
#banNoticeModal .broadcast-icon,
#banAttemptModal .broadcast-icon,
#selfKickModal .broadcast-icon{
  width: 72px;         /* kompakt ikonméret */
}

/* TOP BAR – IP gomb kör alakú 60x60 */
#topBar .topbar-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:60px;                  /* 60x60 */
  height:60px;
  padding:0;
  border:none;
  cursor:pointer;
  border-radius:50%;           /* KÖR */
  background:transparent;
  overflow:hidden;             /* ne lógjon ki a belső fény/glow */
  box-sizing:border-box;
}

/* sötét, kerek „csempe” háttér + visszafogott, kerek árnyék */
#topBar .neo-tile{
  background: radial-gradient(120% 140% at 30% 25%, #132944, #0c1c30);
  box-shadow:
    0 8px 14px rgba(0,0,0,.40),         /* külső árnyék – kerek lesz a border-radius miatt */
    inset 1px 1px 2px rgba(255,255,255,.05),
    inset -2px -3px 6px rgba(0,0,0,.35);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}

/* ikon méret középen – 60px csempéhez ez áll jól */
#topBar .topbar-btn img{
  width:58px;
  height:58px;
  display:block;
  pointer-events:none;
  filter: drop-shadow(0 0 3px rgba(0,160,255,.45)); /* finomabb glow */
}

/* hover/active */
#topBar .topbar-btn:hover{ filter:brightness(1.06); }
#topBar .topbar-btn:active{
  transform: translateY(1px);
  box-shadow:
    0 6px 10px rgba(0,0,0,.50),
    inset 2px 2px 4px rgba(0,0,0,.55),
    inset -1px -1px 2px rgba(0,0,0,.40);
}


/* Csak a SZOBALISTÁN rejtsük a top bart */
body.view-rooms #topBar { display: none !important; }

/* Biztos ami biztos: Online Csevegők és Chat nézetben kényszerítsük vissza */
body.view-global #topBar,
body.view-chat   #topBar { display: flex !important; }

/* ▶ Kiemelt szoba (featured) színei – SZABHATÓ VÁLTOZÓKKAL */
:root{
  --room-feature-bg:   #B22222;   /* teljes sor háttér */
  --room-feature-text: #ffffff;   /* szöveg a kiemelt sorban */
  --room-feature-strip:#B22222;   /* bal oldali csík/pötty */
}

/* teljes sor háttér + szöveg */
.room-table tr.featured-room td{
  background: var(--room-feature-bg) !important;
  color: var(--room-feature-text) !important;
}

/* szobanév, topic, stb. is fehér maradjon */
.room-table tr.featured-room .room-entry,
.room-table tr.featured-room .room-topic,
.room-table tr.featured-room .room-topic *{
  color: var(--room-feature-text) !important;
}

/* bal oldali csík és a pulzáló pötty színe */
.room-table tr.featured-room::before{
  background: var(--room-feature-strip) !important;
}
.room-table tr.featured-room .room-name::before{
  background: var(--room-feature-strip) !important;
}

/* hover ne üsse felül a kiemelt sort */
#rooms .room-table tr.featured-room:hover td{
  background: var(--room-feature-bg) !important;
  color: var(--room-feature-text) !important;
}

/* Alapból legyen rejtve a fejlécek */
#roomHeader, #divRoomHeader { display: none; }

/* Ha szobanézetben vagyunk, jelenjen meg */
body.is-room-view #roomHeader,
body.is-room-view #divRoomHeader {
  display: flex; /* vagy block, ami nálad kell */
}

/* Szobalista nézetben garantáltan rejtve marad */
body.is-roomlist-view #roomHeader,
body.is-roomlist-view #divRoomHeader {
  display: none !important;
}
/* Rejtsünk el MINDEN elszabadult kártyát, ami közvetlenül a <body> alatt van */
body > .user-card { display: none !important; }

/* A rendes helyén (globális online panel) továbbra is látszódjon */
#globalOnlineList .user-card { display: flex !important; }
/* Csak az ÁRVA user-card-okat rejtsük el (amik közvetlenül a <body> alatt lógnak) */
body > .user-card { 
  display: none !important; 
}

/* A globális online lista konténere és a benne lévő kártyák látszódjanak */
#globalOnlineList {
  display: grid;
  padding: 6px 10px;
}

#globalOnlineList .user-card {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

/* Névtördelés biztonságban */
#globalOnlineList .user-card .username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Oldalsáv ne engedjen kilógást */
#leftSidebar, .sidebar, .left-panel, .side-panel { 
  overflow: hidden; 
}