/*
 * Layout5 / ThreeG38
 * Isolado pela classe adicionada no <body>; os demais layouts não herdam
 * nenhuma destas regras.
 */
body.theme-threeg38 {
    --threeg-gold: #f7c75a;
    --threeg-gold-dark: #8e5a22;
    --threeg-header: #14171c;
    --threeg-page: #302023;
    --threeg-surface: #4d3c39;
    --threeg-card: #473337;
    --threeg-card-strong: #5d4037;
    --ep-color-background-fill-body-default: #302023;
    --ep-color-background-fill-foot-bar: #33262a;
    --ep-color-background-fill-surface-lowered: #302023;
    --ep-color-background-fill-surface-raised-L1: #473337;
    --ep-color-background-fill-surface-raised-L2: #5d4040;
    --ep-color-background-fill-top-nav-primary: #14171c;
    --ep-color-background-fill-top-nav-secondary: #14171c;
    --ep-color-background-fill-active-primary: #f0ad35;
    --ep-color-background-fill-active-active: #c47a27;
    --ep-color-background-fill-gradients-primary-a: #f8d77a;
    --ep-color-background-fill-gradients-primary-b: #a96822;
    --ep-color-background-fill-gradients-secondary-a: #5d4037;
    --ep-color-background-fill-gradients-secondary-b: #2c2023;
    --ep-color-background-fill-glow-primary-opacity-100: #f0ad35;
    --ep-color-background-fill-glow-primary-opacity-40: rgba(240, 173, 53, .4);
    --ep-color-border-brand: #f0ad35;
    --ep-color-border-default: #6e5350;
    --ep-color-border-selected: #f7c75a;
    --ep-color-icon-brand-primary: #f0ad35;
    --ep-color-icon-brand-secondary: #fff2bd;
    --ep-color-text-brand-primary: #f7c75a;
    --ep-color-text-default: #fff;
    --ep-color-text-navigation-default: #c4ac9c;
    --ep-color-text-navigation-selected: #ffe59a;
    --ep-color-text-selected: #f7c75a;
    --ep-color-text-weak: rgba(255, 255, 255, .82);
    --ep-color-text-weaker: rgba(255, 255, 255, .62);
    --ep-color-text-weakest: rgba(255, 255, 255, .42);
    --ep-border-radius-surface-default: .5rem;
    background: #4d3c39;
    color: #fff;
}

body.theme-threeg38,
body.theme-threeg38 ion-app,
body.theme-threeg38 ion-content {
    background-color: #4d3c39;
}

body.theme-threeg38 #app > ion-app > ion-content > ion-router-outlet {
    width: 100%;
    max-width: 44.375rem;
    background: #302023;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .32);
}

body.theme-threeg38 .main-page {
    background:
        radial-gradient(circle at 8% 4%, rgba(255, 190, 92, .06), transparent 26rem),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 5px),
        #302023;
}

/* Barra superior compacta e escura */
body.theme-threeg38 .main-page > ion-header {
    height: 3.25rem;
    background: #14171c;
}

body.theme-threeg38 .pwa-header-wrap {
    display: none !important;
}

body.theme-threeg38 .main-page > ion-header ion-toolbar {
    height: 3.25rem;
    min-height: 3.25rem;
    --min-height: 3.25rem;
    --background: #14171c;
    --border-width: 0;
    --padding-start: .45rem;
    --padding-end: .45rem;
}

body.theme-threeg38 .menu-btn {
    width: 2.15rem;
    height: 2.15rem;
    margin-inline-end: .35rem;
    border: 0;
    border-radius: .55rem;
    background: url("/assets/themes/threeg38-menu.png") center / 100% 100% no-repeat;
    overflow: hidden;
}

body.theme-threeg38 .menu-btn .menu-icon {
    opacity: 0;
}

body.theme-threeg38 .logo-wrap {
    width: 6.4rem !important;
    height: 2rem !important;
    justify-content: flex-start;
}

body.theme-threeg38 .logo-wrap img,
body.theme-threeg38 .logo-wrap ion-img {
    max-width: 6.4rem;
    max-height: 2rem;
    object-fit: contain;
}

body.theme-threeg38 .button-box {
    width: auto !important;
    gap: .25rem;
}

body.theme-threeg38 .button-box ion-button,
body.theme-threeg38 .button-box .register-btn-warper {
    min-width: 3.85rem;
    height: 1.85rem;
    margin: 0;
    font-size: .68rem;
    font-weight: 700;
    color: #322317;
    --border-radius: .35rem;
    --background: linear-gradient(180deg, #fff0b8 0%, #cf9b4a 100%);
    --box-shadow: inset 0 1px rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .35);
}

body.theme-threeg38 .rewardTag {
    transform: scale(.78);
    transform-origin: top right;
}

/* Conteúdo da home */
body.theme-threeg38 .main-content {
    --background: transparent;
    border-radius: 0 !important;
}

body.theme-threeg38 .main-content::part(scroll) {
    padding: .7rem .68rem 5rem;
}

body.theme-threeg38 .swiper-poster {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2.91 / 1;
    margin: 0 auto .45rem !important;
    border: 1px solid rgba(255, 210, 112, .18);
    border-radius: .45rem !important;
    overflow: hidden;
    box-shadow: 0 .2rem .55rem rgba(0, 0, 0, .3);
}

body.theme-threeg38 .swiper-poster .swiper,
body.theme-threeg38 .swiper-poster .swiper-wrapper,
body.theme-threeg38 .swiper-poster .swiper-slide,
body.theme-threeg38 .swiper-poster .poster-img {
    width: 100% !important;
    height: 100% !important;
}

body.theme-threeg38 .swiper-poster .poster-img {
    object-fit: cover;
}

/* Dois cards promocionais, como na referência */
body.theme-threeg38 .wrapper.layout1 {
    display: block !important;
    width: 100% !important;
    height: 3.65rem !important;
    margin: .45rem auto !important;
}

body.theme-threeg38 .wrapper.layout1 .column-wrap {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

body.theme-threeg38 .wrapper.layout1 .column-wrap > ion-img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    border: 1px solid rgba(255, 207, 102, .22);
    border-radius: .42rem;
    overflow: hidden;
    box-shadow: 0 .16rem .35rem rgba(0, 0, 0, .25);
}

body.theme-threeg38 .wrapper.layout1 > ion-img {
    display: none;
}

body.theme-threeg38 .scroll-box.layout1 {
    display: none !important;
}

/* Aviso em cápsula */
body.theme-threeg38 .marquee-wrapper {
    width: 100%;
    height: 2.55rem;
    margin: .48rem 0;
    padding: 0 .35rem;
    border: 1px solid #6d4a3b;
    border-radius: .48rem;
    background: linear-gradient(180deg, #51383b, #3a292d);
    color: #f8e8cf;
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

body.theme-threeg38 .marquee-wrapper .megaphone-wrapper {
    height: 100%;
}

body.theme-threeg38 .marquee-wrapper .megaphone {
    color: #f5aa30;
}

body.theme-threeg38 .marquee-wrapper ion-button {
    --color: #f6cf69;
    --background: transparent;
}

/* Jackpot no formato da referência: contador à esquerda e ganhadores à direita. */
body.theme-threeg38 .threeg38-jackpot {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 6.8rem;
    grid-template-columns: 55% 45%;
    margin: .5rem 0;
    padding: .48rem;
    border: 1px solid #6c4b3d;
    border-radius: .7rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 80%, rgba(255, 139, 27, .28), transparent 34%),
        linear-gradient(105deg, #351924 0%, #20111d 53%, #49362f 100%);
    box-shadow: inset 0 1px rgba(255, 226, 159, .12), 0 .2rem .5rem rgba(0, 0, 0, .35);
}

body.theme-threeg38 .threeg38-jackpot::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: .13;
    pointer-events: none;
    background:
        repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.12) 4px 5px),
        radial-gradient(circle at 25% 50%, #ff9b24, transparent 45%);
}

body.theme-threeg38 .threeg38-jackpot__main {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding-right: .5rem;
}

body.theme-threeg38 .threeg38-jackpot__title {
    color: #ffbd2e;
    font-family: Arial Black, Arial, sans-serif;
    font-size: clamp(1.55rem, 7vw, 2.5rem);
    font-weight: 900;
    font-style: italic;
    line-height: .95;
    letter-spacing: -.12rem;
    -webkit-text-stroke: 1px #ff5b15;
    text-shadow:
        0 2px 0 #a92710,
        0 4px 4px rgba(0, 0, 0, .65),
        0 0 8px rgba(255, 197, 58, .5);
}

body.theme-threeg38 .threeg38-jackpot__amount {
    width: 92%;
    margin-top: .38rem;
    padding: .26rem .3rem;
    border: 2px solid #ff9b1d;
    border-radius: .45rem;
    color: #090909;
    background: linear-gradient(180deg, #fff8c9 0%, #ffd85f 52%, #f3a620 100%);
    box-shadow:
        inset 0 0 .45rem rgba(255, 255, 255, .8),
        0 0 .35rem rgba(255, 169, 36, .65);
    font-size: clamp(1.3rem, 6.5vw, 2rem);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    letter-spacing: .04rem;
}

body.theme-threeg38 .threeg38-jackpot__winners {
    position: relative;
    z-index: 1;
    height: 4.55rem;
    min-width: 0;
    padding: .12rem .28rem;
    border: 1px solid rgba(255, 218, 137, .16);
    border-radius: .55rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(126, 94, 70, .62), rgba(79, 57, 50, .7));
}

body.theme-threeg38 .threeg38-jackpot__track {
    animation: threeg38-winners 50s linear infinite;
    will-change: transform;
}

body.theme-threeg38 .threeg38-jackpot:hover .threeg38-jackpot__track {
    animation-play-state: paused;
}

@keyframes threeg38-winners {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

body.theme-threeg38 .threeg38-jackpot__winner {
    display: grid;
    height: 2.15rem;
    min-width: 0;
    align-items: center;
    grid-template-columns: 1.85rem minmax(0, 1fr) auto;
    gap: .28rem;
}

body.theme-threeg38 .threeg38-jackpot__winner img {
    width: 2rem;
    height: 2rem;
    border-radius: .24rem;
    object-fit: cover;
}

body.theme-threeg38 .threeg38-jackpot__winner span {
    display: flex;
    min-width: 0;
    color: rgba(255, 255, 255, .92);
    flex-direction: column;
    font-size: .61rem;
    line-height: 1.15;
}

body.theme-threeg38 .threeg38-jackpot__winner b,
body.theme-threeg38 .threeg38-jackpot__winner small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.theme-threeg38 .threeg38-jackpot__winner small {
    margin-top: .18rem;
    color: rgba(255, 255, 255, .48);
    font-size: .58rem;
}

body.theme-threeg38 .threeg38-jackpot__winner strong {
    color: #ffd83f;
    font-size: .72rem;
    font-weight: 800;
}

/* Categorias horizontais no estilo de botões marrons */
body.theme-threeg38 .wrapper.layout1.segment-c {
    width: 100%;
    height: 3.8rem;
    margin: .55rem 0 .35rem !important;
}

body.theme-threeg38 .segment-c ion-segment {
    gap: .38rem;
    padding: 0;
}

body.theme-threeg38 .segment-c ion-segment-button {
    min-width: 4.2rem;
    height: 3.25rem;
    min-height: 3.25rem;
    margin: 0;
    border: 1px solid #65483c;
    border-radius: .45rem;
    --background: linear-gradient(180deg, #5a4142, #3b2c30);
    --background-checked: linear-gradient(180deg, #8a5e35, #4d332c);
    --color: #d9c7b8;
    --color-checked: #ffe38d;
    --indicator-color: transparent;
}

body.theme-threeg38 .segment-c .btn-wall {
    height: 100%;
}

body.theme-threeg38 .segment-c .type-icon {
    width: 1.8rem;
    height: 1.8rem;
}

body.theme-threeg38 .segment-c ion-label {
    font-size: .64rem;
    font-weight: 700;
}

/* A referência abre diretamente os jogos; o ranking não ocupa a home */
body.theme-threeg38 .game-wrapper > .ranking-area {
    display: none !important;
}

body.theme-threeg38 .game-wrapper,
body.theme-threeg38 .game-wrapper .lazy-component {
    background: transparent;
}

body.theme-threeg38 .game-head {
    min-height: 2.55rem;
    padding-inline: .1rem !important;
    border-color: #60454a !important;
}

body.theme-threeg38 .game-head .title-c,
body.theme-threeg38 .game-head .title {
    color: #fff5dc;
    font-size: .9rem;
    font-weight: 800;
}

body.theme-threeg38 .game-content .card-container {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .45rem !important;
    padding: .4rem 0 .75rem !important;
}

body.theme-threeg38 .game-card {
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid #6b4a45;
    border-radius: .48rem !important;
    overflow: hidden;
    background: #473337;
    box-shadow: 0 .16rem .35rem rgba(0, 0, 0, .32);
}

body.theme-threeg38 .game-card .game-img {
    width: 100% !important;
    aspect-ratio: .84 / 1;
    object-fit: cover;
}

body.theme-threeg38 .game-card .game-name {
    padding: .25rem .2rem;
    color: #fff;
    font-size: .62rem;
    line-height: 1.15;
    text-align: center;
}

/* Navegação fixa inferior dourada */
body.theme-threeg38 ion-tab-bar.tab-bar {
    --background: linear-gradient(180deg, #5b443c 0%, #2f2528 100%);
    --border: 1px solid #6e513d;
    background: linear-gradient(180deg, #5b443c 0%, #2f2528 100%);
    border-top: 1px solid #7a583f;
    box-shadow: 0 -.2rem .65rem rgba(0, 0, 0, .38);
}

body.theme-threeg38 ion-tab-bar .tab-btn {
    color: #cbb9aa;
}

body.theme-threeg38 ion-tab-bar .tab-btn.active-tab,
body.theme-threeg38 ion-tab-bar .active-tab ion-label {
    color: #f9c956 !important;
}

body.theme-threeg38 ion-tab-bar .tab-icon {
    color: currentColor;
}

body.theme-threeg38 ion-tab-bar .active-block {
    background: #f4be45 !important;
}

/* Modais e páginas internas mantêm funções, mas seguem a mesma paleta */
body.theme-threeg38 ion-modal,
body.theme-threeg38 ion-popover,
body.theme-threeg38 ion-alert {
    --background: #30262a;
    --color: #fff;
}

/* Aviso para adicionar à tela inicial */
body.theme-threeg38 .content_footer_pwa {
    background: #4d3c39 !important;
    background-image: none !important;
    color: #fff6e8 !important;
}

body.theme-threeg38 .content_footer_pwa .cancel {
    --color: #f6e7d0;
    color: #f6e7d0 !important;
}

@media (max-width: 430px) {
    body.theme-threeg38 .main-content::part(scroll) {
        padding-inline: .45rem;
    }

    body.theme-threeg38 .game-content .card-container {
        gap: .32rem !important;
    }

    body.theme-threeg38 .game-card .game-name {
        font-size: .58rem;
    }
}