/* Lobby modular no estilo Gato Chef 777.
   Paleta e fundos vêm destas variáveis (tema / painel). */
:root,
html {
    --bg-main: var(--secondary-color, #0b0b0e);
    --bg-card: color-mix(in srgb, var(--secondary-color, #0b0b0e) 82%, #fff);
    --bg-ticker: color-mix(in srgb, var(--secondary-color, #0b0b0e) 88%, #000);
    --text-gold: var(--primary-color, #f3ba2f);
    --text-muted: rgba(255, 255, 255, .68);
    --border-soft: color-mix(in srgb, var(--primary-color, #f3ba2f) 38%, transparent);
    --radius-card: .75rem;
    --radius-btn: .55rem;
    --lobby-banner-autoplay: 4000ms;
    --lobby-banner-radius: .75rem;
}

.ion-page,
.main-page,
ion-content.main-content,
.main-content {
    --background: var(--bg-main);
    background: var(--bg-main);
}

html.has-tenant-wallpaper ion-app,
html.has-tenant-wallpaper #app,
html.has-tenant-wallpaper .ion-page,
html.has-tenant-wallpaper .main-page,
html.has-tenant-wallpaper ion-content,
html.has-tenant-wallpaper ion-content.main-content,
html.has-tenant-wallpaper .main-content {
    --background: transparent !important;
    background: transparent !important;
}

/* 1. Zero flutuantes sobre o conteúdo */
.main-content > .support,
.main-content > .to-top-box,
.main-content > .red-packet-rain,
.support.layout3,
.to-top-box,
.red-packet-rain,
#app-install-bar,
.pwa-header-wrap,
#pwa-header-bar,
#pwa-bar,
.content_footer_pwa,
.fixed.left-2.z-50,
.to-top-box.fixed,
.badge-img,
.box.xuanfu,
.box.xuanfu.touming,
label.circular[for="box-buttons"],
label.fork[for="box-buttons"] {
    display: none !important;
}

.main-content > .swiper-poster,
.main-content > .wrapper.layout1:not(.segment-c) {
    display: none !important;
}

.main-content > .segment-c {
    display: none !important;
}

/* Slider promocional (acima do aviso +18) */
.lobby-banner-slider {
    position: relative;
    margin: .55rem .7rem 0;
    overflow: hidden;
    border-radius: var(--lobby-banner-radius);
    background: var(--bg-card);
    touch-action: pan-y;
    user-select: none;
}

.lobby-banner-track {
    display: flex;
    width: 100%;
    transition: transform .35s ease;
}

.lobby-banner-slide {
    flex: 0 0 100%;
    width: 100%;
    min-height: 7.5rem;
}

.lobby-banner-slide img {
    display: block;
    width: 100%;
    height: 7.75rem;
    object-fit: cover;
    border-radius: var(--lobby-banner-radius);
    background: var(--bg-card);
    color: transparent;
}

.lobby-banner-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .4rem;
    display: flex;
    justify-content: center;
    gap: .3rem;
    pointer-events: none;
}

.lobby-banner-dots span {
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
}

.lobby-banner-dots span.is-on {
    background: var(--text-gold);
    width: .7rem;
    border-radius: .4rem;
}

/* 2. Aviso de jogo responsável */
.lobby-rg-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .55rem .7rem 0;
    padding: .55rem .7rem;
    border: .0625rem solid var(--border-soft);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    color: var(--text-color, #fff);
}

.lobby-rg-banner p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: .75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .88);
}

.lobby-rg-banner strong {
    color: var(--text-gold);
    font-weight: 700;
}

.lobby-rg-badge {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    border-radius: 50%;
    background: #e53e3e;
    color: #ffffff;
    font-size: .8125rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
    box-shadow: 0 0 0 .125rem rgba(255, 255, 255, .85), 0 .125rem .5rem rgba(0, 0, 0, .4);
}

/* Letreiro Jackpot: cifrões e JACKPOT em dourado com brilho */
.marquee-wrapper .marquee__item.lobby-jackpot-text {
    color: #ffd700 !important;
    -webkit-text-fill-color: #ffd700;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-shadow: 0 0 .375rem rgba(255, 215, 0, .8), 0 0 .875rem rgba(255, 215, 0, .45);
}

/* 3. Ticker */
.marquee-wrapper {
    display: flex !important;
    align-items: center;
    margin: .5rem .7rem 0 !important;
    padding: 0 .15rem 0 .4rem !important;
    height: 2.15rem !important;
    border: .0625rem solid var(--border-soft) !important;
    border-radius: var(--radius-card) !important;
    background: var(--bg-ticker) !important;
}

.marquee-wrapper .megaphone-wrapper {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
}

.marquee-wrapper > ion-button,
.marquee-wrapper > .unset-btn.icon-btn,
.marquee-wrapper > .icon-btn {
    display: none !important;
}

.marquee-wrapper .lobby-chat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-gold);
    cursor: pointer;
}

/* 4. Atalhos */
.lobby-quick-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .4rem;
    margin: .7rem .7rem 0;
}

.lobby-quick-nav button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .32rem;
    min-width: 0;
    min-height: 3.9rem;
    padding: .5rem .2rem .45rem;
    border: .0625rem solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, .72);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.lobby-quick-nav .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    color: inherit;
    transition: transform .18s ease, filter .18s ease;
}

.lobby-quick-nav .ico svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lobby-quick-nav .lbl {
    display: block;
    max-width: 100%;
    font-size: .64rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .01em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lobby-quick-nav button:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .28);
    background: rgba(0, 0, 0, .52);
    color: #fff;
}

.lobby-quick-nav button:active {
    transform: scale(.96);
}

.lobby-quick-nav button:focus-visible {
    outline: .125rem solid var(--text-gold);
    outline-offset: .125rem;
}

.lobby-quick-nav button.is-active {
    border-color: var(--text-gold);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--text-gold) 22%, transparent), color-mix(in srgb, var(--text-gold) 6%, transparent)),
        rgba(0, 0, 0, .45);
    color: var(--text-gold);
    box-shadow:
        0 0 0 .0625rem color-mix(in srgb, var(--text-gold) 55%, transparent),
        0 0 .85rem color-mix(in srgb, var(--text-gold) 45%, transparent),
        inset 0 0 .6rem color-mix(in srgb, var(--text-gold) 14%, transparent);
}

.lobby-quick-nav button.is-active .ico {
    filter: drop-shadow(0 0 .3rem color-mix(in srgb, var(--text-gold) 75%, transparent));
}

.lobby-quick-nav button.is-active .lbl {
    color: #fff;
}

/* 5. Bloco de jogos */
.game-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: .85rem .7rem .35rem !important;
    color: var(--text-color, #fff);
}

.game-head .logo-c {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .95rem;
    font-weight: 800;
    color: var(--text-color, #fff);
}

.game-head.lobby-popular-head .logo-c::after {
    content: " GAME";
    color: var(--text-gold);
    font-weight: 800;
}

.game-head .total {
    display: flex !important;
    align-items: center;
    gap: .35rem;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
}

.game-head .total::before {
    content: "<";
    color: var(--text-gold);
    font-weight: 700;
}

.game-head .total::after {
    content: "> Mais";
    color: var(--text-gold);
    font-weight: 700;
}

.game-wrapper .img-box,
.game-wrapper img.img-box,
.game-wrapper .game-item,
.game-wrapper [class*="game-card"] {
    border-radius: var(--radius-card) !important;
    background: var(--bg-card);
    overflow: hidden;
}

.game-wrapper .swiper-slide,
.game-wrapper .onMore {
    padding: .18rem !important;
}

/* Saque sem senha de fundo */
#confirmModalWithdraw .password-input,
#confirmModalWithdraw .fundPassword,
.fundPassword,
.withdraw-apply .password-input {
    display: none !important;
}

/* Bottom nav plana — sem baú flutuante */
ion-tab-bar.tab-bar,
.tab-bar.layout1,
.tab-bar.gc-flat-tabbar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 999 !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: var(--secondary-color) !important;
    --background: var(--secondary-color) !important;
    --tab-bar-top: 0rem !important;
    --tab-bar-height: 56px !important;
    overflow: hidden !important;
    transform: none !important;
}

.tab-bar .inner-wrap {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 8px 0 !important;
    width: 100% !important;
    height: auto !important;
    background: var(--secondary-color) !important;
}

.tab-bar .background-img,
.flexible-tab,
.flexible-tab-box,
ion-content .deposit.absolute {
    display: none !important;
}

.tab-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    color: rgba(255, 255, 255, .72) !important;
}

.tab-btn .tab-icon {
    width: 22px;
    height: 22px;
    display: flex;
    color: inherit;
}

.tab-btn .tab-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tab-btn .tab-label {
    font-size: 11px !important;
    line-height: 1 !important;
    color: inherit !important;
}

/* Selo dourado "100%" no ícone Recarregar */
.tab-btn[tab="entrar"] .tab-icon {
    position: relative;
    overflow: visible;
}

.tab-btn[tab="entrar"] .tab-icon::after {
    content: "100%";
    position: absolute;
    top: -.5625rem;
    left: calc(100% - .375rem);
    z-index: 2;
    padding: .0625rem .3125rem;
    border-radius: 999px;
    background: #ffd700;
    color: #1a1200;
    font-size: .625rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 .125rem .375rem rgba(0, 0, 0, .4);
}

.tab-btn.active-tab,
.tab-btn.active-tab .tab-label,
.tab-btn.active-tab .tab-icon {
    color: var(--primary-color) !important;
}

html.local-games-only .game-wrapper,
html.local-games-only .hall-list,
html.local-games-only .vendor-list {
    display: none !important;
}

.lobby-local-catalog {
    margin: .75rem .75rem 5.5rem;
    position: relative;
    z-index: 2;
}
.lobby-catalog-section {
    margin-bottom: 1.5rem;
}
.lobby-catalog-section:last-child {
    margin-bottom: 0;
}
.lobby-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 .75rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid rgba(243, 186, 47, 0.22);
}
.lobby-section-title-wrap {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.lobby-section-header h2 {
    margin: 0;
    color: var(--text-gold, #f3ba2f);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.lobby-section-header h2::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 1rem;
    background: linear-gradient(180deg, #f3ba2f, #d49b1a);
    border-radius: 2px;
}
.lobby-section-badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    font-size: .68rem;
    font-weight: 700;
    color: #f3ba2f;
    background: rgba(243, 186, 47, 0.12);
    border: 1px solid rgba(243, 186, 47, 0.32);
    border-radius: 999px;
}
.lobby-local-empty {
    color: var(--text-muted, rgba(255,255,255,.68));
    font-size: .9rem;
}
/*
 * auto-fill mantém colunas vazias: com poucos jogos o card fica à esquerda com o tamanho normal.
 * Mínimo de 3 por linha; em contentores mais largos cabem mais colunas de ~6.6rem.
 */
.lobby-local-grid {
    --grid-gap: .6rem;
    --card-min: min(6.6rem, calc((100% - 2 * var(--grid-gap)) / 3));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
    gap: var(--grid-gap);
    justify-content: start;
    align-items: stretch;
}
.lobby-local-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-soft, rgba(243,186,47,.38));
    border-radius: var(--radius-card, .75rem);
    background: var(--bg-card, #16161c);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.lobby-local-card:hover,
.lobby-local-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.lobby-local-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111;
}
.lobby-local-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--banner-position, 50% 20%);
    display: block;
}
.lobby-local-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    padding: .45rem .5rem .55rem;
}
.lobby-local-meta strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.2;
}
.lobby-local-meta em {
    font-style: normal;
    font-size: .56rem;
    line-height: 1.2;
    color: var(--text-muted, rgba(255,255,255,.68));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}