/*
 * Blá Lobby — Responsive V9 (Preserve Classic Desktop + Pixel-Perfect Mobile)
 * Suporte completo para: 1920 / 1440 / 1366 / 1024 / 768 / 425 / 375 / 360 / 320.
 */

html, body {
    max-width: 100%;
}
#hp, #hp * {
    box-sizing: content-box;
}
.responsive-tabs {
    display: none;
}
#favRoomsList.is-hidden,
#favRegisterMsg.is-hidden {
    display: none !important;
}

/* Evitar que os anúncios laterais expandam a largura da página em ecrãs < 1230px */
#skyscrapper, #fullpage {
    display: none !important;
}
@media screen and (min-width: 1230px) and (max-width: 1379px) {
    #skyscrapper { display: block !important; }
}
@media screen and (min-width: 1380px) {
    #fullpage { display: block !important; }
}

/* Espaçamento superior correspondente à barra removida (30px) */
#top-spacer {
    height: 30px;
    clear: both;
}

/* Desktop: inputs de login harmonizados e perfeitamente alinhados */
#login #passaporte,
#login #pass,
#login input[type="email"],
#login input[type="password"] {
    width: 148px !important;
    box-sizing: border-box !important;
}
#logpassdiv tr td {
    vertical-align: middle;
}
#logpassdiv tr:first-child td:nth-child(2),
#logpassdiv tr:nth-child(2) td:nth-child(2) {
    text-align: left !important;
}

/* Header desktop: select perfeitamente contido na barra de 24px sem overflow nem saltos */
#hp .userlist form {
    margin: 0 !important;
    padding: 0 !important;
}
#hp .userlist select {
    box-sizing: border-box !important;
    height: 24px !important;
    line-height: 22px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
    vertical-align: middle !important;
}

/* Linha inferior de salas clássica no Desktop (>= 1001px) */
#bottomRoomsRow {
    display: grid;
    grid-template-columns: 335px 335px 300px;
    gap: 10px;
    align-items: start;
    overflow: visible;
}
#bottomRoomsRow > #salasVip,
#bottomRoomsRow > #outrasSalas,
#bottomRoomsRow > #div-gpt-ad-1334063082007-0 {
    float: none !important;
    margin: 0 !important;
}
#bottomRoomsRow > #salasVip,
#bottomRoomsRow > #outrasSalas {
    width: 335px;
}
#bottomRoomsRow > #div-gpt-ad-1334063082007-0 {
    width: 300px !important;
    height: 250px !important;
    box-sizing: border-box;
}
#loginbox .mrectable .mrec {
    box-sizing: border-box;
}

/* Proteção contra scroll horizontal abaixo de 1040px */
@media screen and (max-width: 1040px) {
    html, body { min-width: 0 !important; }
    #hpbody { overflow-x: hidden !important; }
}

/* ==========================================================
   TABLET / LAPTOP COMPACTO (701px - 1000px)
   ========================================================== */
@media screen and (max-width: 1000px) {
    #hp {
        width: auto;
        margin: 10px 9px 0;
        padding: 8px;
        box-sizing: border-box;
    }

    #hp .blalogo { top: -3px; left: -3px; }
    #hp .blalogo img { width: 90px; height: auto; }
    #hp #header {
        height: auto;
        min-height: 58px;
        padding: 8px 12px 8px 98px;
        overflow: visible;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #hp #header .mleft160 {
        float: none !important;
        margin-left: 0;
        font-size: 22px;
        line-height: 28px;
    }
    #hp .userlist {
        float: none !important;
        margin: 0 0 0 auto !important;
        order: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    #hp #header > .fright.f11.mright10 {
        float: none !important;
        margin: 0 0 0 10px !important;
        order: 3;
    }

    /* Tabs para login em tablet */
    .responsive-tabs {
        display: flex;
        width: 100%;
        background: #ececec;
        border: 1px solid #c6c6c6;
        border-bottom: 0;
        overflow: hidden;
        box-sizing: border-box;
    }
    .responsive-tab {
        appearance: none;
        -webkit-appearance: none;
        flex: 1 1 0;
        min-width: 0;
        height: 32px;
        padding: 0 10px;
        border: 0;
        border-right: 1px solid #c6c6c6;
        border-bottom: 1px solid #c6c6c6;
        background: #ececec;
        color: #1c353a;
        font: bold 12px/31px Arial, Helvetica, sans-serif;
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
    }
    .responsive-tab:last-child { border-right: 0; }
    .responsive-tab.is-active { background: #fff; border-bottom-color: #fff; }
    .responsive-tab:focus-visible { outline: 2px solid #1c353a; outline-offset: -2px; }

    #loginResponsiveTabs {
        width: 100%;
        margin-left: 0;
    }

    /* Em Tablet (721px - 1000px): Login à esquerda, Publicidade à direita lado-a-lado */
    #loginbox {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-areas:
            "login ad"
            "fav   fav";
        gap: 8px 10px;
        align-items: start;
        overflow: visible;
    }
    #loginbox > .sala {
        grid-area: login;
        float: none !important;
        width: 100%;
        height: auto;
        min-width: 0;
        margin: 0;
    }
    #loginbox > .mrectable {
        grid-area: ad;
        float: none !important;
        width: 300px;
        height: 250px;
        margin: 0;
    }
    #loginbox > #favlist {
        grid-area: fav;
        float: none !important;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 22px;
        margin: 0;
        box-sizing: border-box;
    }

    #hp #login { width: 100%; height: auto; background: transparent; }
    #login .login { width: 100%; height: auto; min-height: 0; overflow: visible; background: transparent; }
    #login #logpassdiv,
    #login #lognickdiv {
        display: none !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 194px;
        padding: 14px 18px 16px !important;
        box-sizing: border-box;
    }
    #login #logpassdiv { background-color: #fff; }
    #login #lognickdiv {
        background-color: #f0f0f0;
        background-image: url('../imagens/login.png');
        background-repeat: repeat;
    }
    #login #logpassdiv.responsive-active,
    #login #lognickdiv.responsive-active { display: block !important; }

    #login #logpassdiv h2,
    #login #logpassdiv h3,
    #login #lognickdiv h2,
    #login #lognickdiv h3 {
        width: min(100%, 430px);
        margin-left: auto;
        margin-right: auto;
    }

    #login #logpassdiv table {
        display: block;
        width: min(100%, 380px);
        margin: 16px auto 0;
    }
    #login #logpassdiv table tbody { display: block; width: 100%; }
    #login #logpassdiv table tr {
        display: grid;
        grid-template-columns: 72px minmax(0, 190px) 44px;
        column-gap: 7px;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    #login #logpassdiv table td {
        display: block;
        width: auto !important;
        min-width: 0;
        padding-left: 0;
    }
    #login #logpassdiv tr:first-child td:nth-child(1) { grid-column: 1; }
    #login #logpassdiv tr:first-child td:nth-child(2) { grid-column: 2; padding-right: 0 !important; }
    #login #logpassdiv tr:nth-child(2) td:nth-child(1) { grid-column: 1; }
    #login #logpassdiv tr:nth-child(2) td:nth-child(2) { grid-column: 2; padding-right: 0 !important; }
    #login #logpassdiv tr:nth-child(2) td:nth-child(3) { grid-column: 3; }
    #login #logpassdiv tr:nth-child(3) td:first-child { grid-column: 1; }
    #login #logpassdiv tr:nth-child(3) td:nth-child(2) { grid-column: 2 / 4; }
    #login #passaporte,
    #login #pass { width: 100% !important; max-width: none; min-width: 0; box-sizing: border-box; }
    #login #lognickdiv table { margin: 16px auto 0; }

    /* Passaporte Logado Responsivo (.logged) */
    #login .logged #logpassdiv table,
    .logged #logpassdiv table {
        display: table !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 16px auto 0 !important;
    }
    #login .logged #logpassdiv table tbody,
    .logged #logpassdiv table tbody {
        display: table-row-group !important;
        width: auto !important;
    }
    #login .logged #logpassdiv table tr,
    .logged #logpassdiv table tr {
        display: table-row !important;
        width: auto !important;
        margin: 0 !important;
    }
    #login .logged #logpassdiv table td,
    .logged #logpassdiv table td {
        display: table-cell !important;
        width: auto !important;
        vertical-align: middle !important;
        padding-bottom: 10px !important;
    }
    #login .logged #logpassdiv tr:first-child td:first-child,
    .logged #logpassdiv tr:first-child td:first-child {
        white-space: nowrap !important;
        text-align: right !important;
        padding-right: 8px !important;
        font-size: 12px !important;
        font-weight: bold !important;
        width: auto !important;
        grid-column: auto !important;
    }
    #login .logged #logpassdiv tr:first-child td:nth-child(2),
    .logged #logpassdiv tr:first-child td:nth-child(2) {
        text-align: left !important;
        padding-right: 0 !important;
        grid-column: auto !important;
    }
    #login .logged #logpassdiv tr:nth-child(2) td:nth-child(2),
    .logged #logpassdiv tr:nth-child(2) td:nth-child(2) {
        text-align: left !important;
        grid-column: auto !important;
    }
    #login .logged #logpassdiv tr:nth-child(3) td:nth-child(2),
    .logged #logpassdiv tr:nth-child(3) td:nth-child(2) {
        text-align: left !important;
        grid-column: auto !important;
    }
    #login .logged #logpassdiv select#selnick,
    .logged #logpassdiv select#selnick {
        width: 145px !important;
        max-width: calc(100vw - 150px) !important;
        height: 27px !important;
        box-sizing: border-box !important;
    }
    #login .logged #logpassdiv #b_entrar_pass,
    .logged #logpassdiv #b_entrar_pass,
    #login .logged #logpassdiv #b_ghost_pass,
    .logged #logpassdiv #b_ghost_pass {
        width: 145px !important;
        max-width: calc(100vw - 150px) !important;
        height: 27px !important;
        line-height: 27px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    #favlist #favRoomsList.is-hidden,
    #favlist #favRoomsList[style*="display: none"],
    #favlist #favRoomsList[style*="display:none"],
    #favlist .rooms.is-hidden {
        display: none !important;
    }
    #favlist #favRegisterMsg.is-hidden,
    #favlist #favRegisterMsg[style*="display: none"],
    #favlist #favRegisterMsg[style*="display:none"] {
        display: none !important;
    }
    #favlist #favRoomsList:not(.is-hidden),
    #favlist .rooms:not(.is-hidden) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    #desktopFavRoomsContainer {
        display: inline-flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    /* Salas: abas de seleção */
    #roomsResponsiveTabs { margin: 0; }
    #salasPrincipais,
    #salasVip,
    #outrasSalas { display: none !important; }
    #salasPrincipais.responsive-active,
    #salasVip.responsive-active,
    #outrasSalas.responsive-active { display: block !important; }
    #salasPrincipais { margin-top: 0 !important; box-sizing: border-box; }

    #leaderboard { width: 100% !important; max-width: 100%; box-sizing: border-box !important; }
    #leaderboard + table.map {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
    }
    #leaderboard + table.map > tbody,
    #leaderboard + table.map > tbody > tr { display: contents; }
    #leaderboard + table.map td {
        display: block;
        width: auto !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 5px 4px;
    }

    #bottomRoomsRow {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: start;
    }
    #bottomRoomsRow > #salasVip,
    #bottomRoomsRow > #outrasSalas { width: 100%; }
    #bottomRoomsRow > #div-gpt-ad-1334063082007-0 { grid-column: 1; justify-self: center; }
    #bottomRoomsRow.has-room-panel { grid-template-columns: minmax(0, 1fr) 300px; }
    #bottomRoomsRow.has-room-panel > #salasVip.responsive-active,
    #bottomRoomsRow.has-room-panel > #outrasSalas.responsive-active { grid-column: 1; grid-row: 1; }
    #bottomRoomsRow.has-room-panel > #div-gpt-ad-1334063082007-0 { grid-column: 2; grid-row: 1; }
    #salasVip .inner,
    #outrasSalas .inner { width: 100%; min-height: 250px; box-sizing: border-box; }

    #hp .footer { height: auto !important; min-height: 26px; }
}

/* ==========================================================
   MOBILE (<= 720px) — Design Retro Perfeito e Fluido
   ========================================================== */
@media screen and (max-width: 720px) {
    #hp { margin: 5px 4px 0; padding: 5px; }

    /* Login passa a uma coluna empilhada verticalmente */
    #loginbox {
        grid-template-columns: 1fr;
        grid-template-areas: "login" "fav" "ad";
    }
    #loginbox > .mrectable {
        display: block !important;
        width: 100% !important;
        margin: 10px auto !important;
    }
    #loginbox > .mrectable tbody,
    #loginbox > .mrectable tr,
    #loginbox > .mrectable td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }
    #loginbox > .mrectable .mrec {
        display: flex !important;
        width: 300px !important;
        max-width: 100% !important;
        height: 250px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    #bottomRoomsRow.has-room-panel { grid-template-columns: 1fr; }
    #bottomRoomsRow.has-room-panel > #salasVip.responsive-active,
    #bottomRoomsRow.has-room-panel > #outrasSalas.responsive-active,
    #bottomRoomsRow.has-room-panel > #div-gpt-ad-1334063082007-0 {
        grid-column: 1;
        grid-row: auto;
    }
    #bottomRoomsRow > #div-gpt-ad-1334063082007-0 {
        width: min(300px, 100%) !important;
        height: 250px;
        margin: 8px auto;
        box-sizing: border-box !important;
    }

    /* Header Compacto e Sem Cortes */
    #hp .blalogo { top: -2px; left: -2px; }
    #hp .blalogo img { width: 80px; height: auto; }
    #hp #header {
        position: relative;
        min-height: 80px;
        padding: 6px 8px 6px 88px;
        overflow: visible;
        box-sizing: border-box !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #hp #header .mleft160 {
        float: none !important;
        margin-left: 0;
        font-size: 19px;
        line-height: 23px;
        white-space: nowrap;
    }
    #hp #header > .fright.f11.mright10 {
        float: none !important;
        position: absolute;
        top: 6px;
        right: 8px;
        margin: 0;
        line-height: 23px;
    }
    #hp .userlist {
        float: none !important;
        position: static !important;
        width: 100%;
        margin-top: 4px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        line-height: 24px;
        white-space: nowrap;
        box-sizing: border-box !important;
    }
    #hp .userlist .select {
        float: none;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 140px;
        margin: 0;
    }
    #hp .userlist select {
        width: 100%;
        height: 24px;
        box-sizing: border-box !important;
        font-size: 11px;
    }
    #hp .userlist .semaforo {
        float: none;
        flex: 0 0 auto;
        margin: 0;
        display: flex;
        align-items: center;
    }
    #hp .userlist .semaforo img {
        display: block;
        vertical-align: middle;
    }
    #hp .userlist > .f11.fleft {
        float: none !important;
        flex: 0 0 auto;
        line-height: 24px;
    }

    /* Abas de Login */
    #loginResponsiveTabs { width: 100%; margin-left: 0; }
    .responsive-tab {
        height: 33px;
        line-height: 32px;
        font-size: 12px;
        padding: 0 6px;
        box-sizing: border-box !important;
    }

    #hp #login { background: transparent !important; }
    #login .login {
        min-height: 0 !important;
        background: transparent !important;
    }
    #login #logpassdiv,
    #login #lognickdiv {
        min-height: 194px;
        box-sizing: border-box !important;
        padding: 12px 10px 14px !important;
    }
    #login #logpassdiv h2,
    #login #logpassdiv h3,
    #login #lognickdiv h2,
    #login #lognickdiv h3 { width: 100%; }

    #login #logpassdiv table {
        width: 100%;
        max-width: 350px;
        margin: 12px auto 0;
        box-sizing: border-box !important;
    }
    #login #logpassdiv table tr {
        grid-template-columns: 62px minmax(0, 1fr) 42px;
        column-gap: 6px;
        align-items: center;
        margin-bottom: 8px;
    }
    #login #logpassdiv table td { padding: 0 !important; }
    #login #logpassdiv table td div { width: 100%; }
    #login #passaporte,
    #login #pass {
        width: 100% !important;
        height: 26px;
        box-sizing: border-box !important;
    }
    #b_login {
        width: 42px !important;
        height: 26px;
        line-height: 24px;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: center;
    }

    #loginbox > #favlist {
        padding: 7px 10px !important;
        line-height: 18px;
        text-align: center;
        font-size: 11px;
    }

    /* Secção de pesquisa de salas: inputs e botão lado a lado com flex */
    #hp .salas > .f16.c1.bold {
        font-size: 14px;
        line-height: 22px !important;
    }
    #hp .salas > .f16.c1.bold .fleft {
        float: none !important;
        width: 100%;
        margin-bottom: 6px;
    }
    #hp .salas > .f16.c1.bold .fright {
        float: none !important;
        width: 100%;
        display: flex !important;
        align-items: center;
        gap: 6px;
        padding-top: 0;
        box-sizing: border-box !important;
    }
    #pubsalastit {
        display: inline-block;
        float: none !important;
        margin: 0;
        white-space: nowrap;
        font-size: 12px;
    }
    #pubsalas {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        height: 26px;
        margin: 0 !important;
        box-sizing: border-box !important;
        font-size: 12px;
    }
    #pubsalasbut {
        flex: 0 0 auto;
        width: 60px !important;
        height: 26px;
        line-height: 24px;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: center;
    }

    #leaderboard {
        height: 56px !important;
        margin: 8px 0 !important;
        font-size: 11px;
    }
    #leaderboard + table.map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 6px;
    }
    #leaderboard + table.map td {
        padding: 5px 3px;
        font-size: 12px;
        line-height: 15px;
        white-space: normal;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }

    #salasVip table.map,
    #outrasSalas table.map { table-layout: fixed; }
    #salasVip table.map td,
    #outrasSalas table.map td {
        width: 50%;
        white-space: normal;
        overflow-wrap: anywhere;
        padding: 4px;
        box-sizing: border-box;
        font-size: 12px;
        line-height: 15px;
    }

    /* Rodapé Empilhado Limpo */
    #hp .footer {
        height: auto !important;
        min-height: 48px;
        padding: 8px 4px;
        box-sizing: border-box !important;
        display: flex;
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
    #hp .footer > .fright,
    #hp .footer > .fleft {
        float: none !important;
        width: 100%;
        text-align: center;
        line-height: 18px !important;
        margin: 0;
    }
    #hp .footer span {
        display: inline-block;
        padding-left: 0 !important;
        margin-top: 3px;
    }

    /* Modal de Registo Adaptado */
    #registerlayer .inner {
        width: auto !important;
        height: auto !important;
        max-width: calc(100vw - 24px);
        min-height: 108px;
        left: 12px !important;
        right: 12px;
        top: 50%;
        margin: -84px 0 0 !important;
        padding: 16px 12px !important;
        box-sizing: border-box;
    }
    #registerlayer img { width: 72px !important; height: 72px !important; margin-right: 8px; }
    #registerlayer .contents { float: none !important; width: auto !important; overflow: hidden; }
}

/* ==========================================================
   ECRÃS ESTREITOS (<= 380px)
   ========================================================== */
@media screen and (max-width: 380px) {
    #hp .blalogo img { width: 72px; }
    #hp #header {
        min-height: 76px;
        padding: 5px 6px 5px 78px;
    }
    #hp #header .mleft160 { font-size: 17px; }
    #hp .userlist .select { max-width: 115px; }

    #login #logpassdiv table tr {
        grid-template-columns: 56px minmax(0, 1fr) 38px;
        column-gap: 4px;
    }
    #b_login { width: 38px !important; }

    #pubsalastit { font-size: 11px; }
    #pubsalasbut { width: 54px !important; }

    #leaderboard + table.map td,
    #salasVip table.map td,
    #outrasSalas table.map td {
        font-size: 11px;
        line-height: 13px;
    }
}

/* ==========================================================
   ECRÃS MUITO ESTREITOS (<= 330px)
   ========================================================== */
@media screen and (max-width: 330px) {
    #hp { margin-left: 2px; margin-right: 2px; padding-left: 2px; padding-right: 2px; }
    #hp .blalogo img { width: 66px; }
    #hp #header {
        min-height: 74px;
        padding: 4px 4px 4px 72px;
    }
    #hp #header .mleft160 { font-size: 16px; line-height: 20px; }
    #hp .userlist { gap: 4px; }
    #hp .userlist .select { max-width: 100px; }
    #hp .userlist select { font-size: 10px; padding: 1px; }

    .responsive-tab { font-size: 11px; padding: 0 3px; }
    #login #logpassdiv,
    #login #lognickdiv { padding-left: 4px !important; padding-right: 4px !important; }

    #login #logpassdiv table tr {
        grid-template-columns: 48px minmax(0, 1fr) 34px;
        column-gap: 3px;
    }
    #login #logpassdiv td:first-child { font-size: 10px; }
    #login #passaporte,
    #login #pass { font-size: 11px; }
    #b_login { width: 34px !important; font-size: 10px; }

    #pubsalastit { display: none; } /* Poupa espaço em 320px */
    #pubsalas { flex: 1 1 auto; }
    #pubsalasbut { width: 50px !important; font-size: 10px; }

    #hp .footer { font-size: 10px; }
}

table.map a.active-room,
#desktopFavRoomsContainer a.active-room {
    font-weight: bold !important;
    text-decoration: underline !important;
    color: var(--room-color, #96630b) !important;
}

#b_ghost,
#b_ghost_pass {
    cursor: pointer !important;
    user-select: none;
}