/* Poderosa777 | Tema Premium Vermelho, Preto e Dourado
   Aplicado após o tema original para preservar navegação e lógica do Vue/Ionic.
   Paleta inspirada na referência fornecida pelo proprietário.
*/
:root, html, body, html.new-skin-symbol {
    color-scheme: dark;
    --p777-black: #050506;
    --p777-panel: #111012;
    --p777-red: #bb0716;
    --p777-red-bright: #e71922;
    --p777-gold: #ffc533;
    --p777-gold-light: #ffe07e;
    --p777-white: #fff9f1;
    --ep-color-background-fill-body-default: #050506 !important;
    --ep-color-background-fill-top-nav-primary: #0a0809 !important;
    --ep-color-background-fill-surface: #151113 !important;
    --ep-color-background-fill-surface-raised-L1: #1a1516 !important;
    --ep-color-background-fill-surface-raised-L2: #221416 !important;
    --ep-color-background-fill-surface-lowered: #0d0a0b !important;
    --ep-color-background-fill-glow-primary-opacity-40: rgba(210,0,24,.30) !important;
    --ep-color-background-fill-glow-secondary-opacity-100: #ad0917 !important;
    --ep-color-text-default: #faf7f5 !important;
    --ep-color-text-weak: #bdb6b7 !important;
    --ep-color-text-weaker: #93898c !important;
    --ep-color-border-default: #382024 !important;
    --ep-color-border-brand: #e31424 !important;
    --ep-color-icon-brand-primary: #ffca35 !important;
    --ep-color-icon-brand-secondary: #e61c28 !important;
    --ep-color-text-brand-primary: #ffd054 !important;
    --ep-color-btn-level-3-border: #ffc533 !important;
    --color-bar-bg-100: #070608 !important;
    --color-primary-btn-main: linear-gradient(145deg,#f2222d,#980006) !important;
    --color-primary-border-light: #e81227 !important;
    --tab-image-color: #e2d9d9 !important;
    --tab-image-active-color: #ffdf4e !important;
    --color-text-tab-main: #ffdf4e !important;
    --d4e820a4: #060405 !important;
    --ion-background-color: #050506 !important;
    --ion-text-color: #fff9f1 !important;
    --ion-toolbar-background: #0a0809 !important;
    --ion-item-background: #110d0e !important;
    --ion-color-primary: #f0ac1a !important;
    --ion-color-primary-contrast: #170d02 !important;
}
html, body, #app, ion-app, ion-router-outlet, ion-page {
    background: #050506 !important;
}
body {color:#fff9f1 !important;font-family:'Inter',system-ui,Arial,sans-serif;}
ion-content {--background:#050506 !important;}
ion-content::part(background) { background: #050506 !important; }
ion-header, ion-toolbar {--background:#080707 !important;--color:#fff !important;}
ion-header { border-bottom:1px solid rgba(246,31,42,.30); }
/* Barra do aplicativo e navegação inferior */
ion-tab-bar, ion-tab-bar div.tab-bar {
    --background:#070607 !important;
    background:#070607 !important;
    border-top:1px solid #7b1018 !important;
    box-shadow:0 -7px 25px rgba(0,0,0,.60) !important;
}
ion-tab-button {--color:#e1dddd !important;--color-selected:#ffcb31 !important;}
ion-tab-button.tab-selected, ion-tab-button[aria-selected='true'] {color:#ffca34 !important;}
ion-tab-button.tab-selected ion-icon {filter: drop-shadow(0 0 5px rgba(239,28,25,.85));}
/* Cards: bordas sutis, em vez de azul / cinza originais */
.game-card, .style1.game-card, .style2.game-card, .game-box ion-col {
    border-radius:12px !important;
}
.game-card .game-img, .game-card ion-img, .game-box ion-img {
    border-radius:11px !important;
    overflow:hidden;
}
/* Superfícies e chips compatíveis com o skin layout2 */
.new-skin-symbol .tab-bar, .new-skin-symbol .category-container .container,
.new-skin-symbol ion-list, .new-skin-symbol ion-card, .new-skin-symbol ion-item {
    --background:#111011;
}
.new-skin-symbol .search-container .ion-no-border .toolbar-search #searchbar {
    --background:#171315 !important;
    --box-shadow:0 0 0 1px #642026 !important;
    border-radius:10px !important;
}
.new-skin-symbol ion-segment-button.segment-button-checked,
.new-skin-symbol ion-segment-button.active-tab {
    --color-checked:#ffd15d !important;
    color:#ffd15d !important;
}
/* Chamadas à ação de login e cadastro, sem interferir em rotas */
ion-button.login, ion-button.register,
.new-skin-symbol ion-button.login, .new-skin-symbol ion-button.register {
    --color:#160a00 !important;
    --background:#ffbd26 !important;
    --background-hover:#ffd86b !important;
    --background-activated:#f0a409 !important;
    --border-radius:10px !important;
    --box-shadow:inset 0 1px 0 #ffe99e, 0 2px 8px rgba(104,37,0,.25) !important;
    font-weight:700 !important;
}
ion-button.login::part(native), ion-button.register::part(native) {
    background:linear-gradient(180deg,#ffe16b 0%,#ffc127 52%,#e9a215 100%) !important;
    color:#211100 !important;
    border:1px solid #ffdb7e !important;
    border-radius:10px !important;
    font-weight:700 !important;
}
/* Botões principais dos formulários mantêm estados desativados e autenticação */
ion-button.primary:not(.button-disabled):not([disabled]) {
    --background:linear-gradient(180deg,#ffc93c,#e7a312) !important;
    --color:#251300 !important;
}
/* Banners carregados pela API existente: cantos arredondados, moldura vermelha */
.swiper-slide img, .swiper-wrapper img, .swiper img,
.banner-swiper img, .banner-box img, [class*='banner'] ion-img {
    border-radius:12px;
}
.swiper-slide img[src*='poderosa777_banner'],
img[src*='poderosa777_banner'] {
    object-fit:cover;
    border-radius:12px !important;
    border:1px solid rgba(255,67,40,.35);
    box-shadow:0 5px 18px rgba(118,0,13,.23);
}
/* Ajustes de tipografia e brilho sem comprometer a legibilidade */
.new-skin-symbol .favorite.active, .new-skin-symbol .tab-img.on {color:#ffcb35 !important;}
.new-skin-symbol a {text-decoration:none;}
.new-skin-symbol [class*='section-title'],
.new-skin-symbol [class*='game-title'] {letter-spacing:-.01em;}
/* A maioria das telas Ionic usa shadow DOM: variáveis, não overlays, mantêm a interação. */
@media (max-width: 700px) {
    ion-content { --padding-start:0; --padding-end:0; }
    ion-tab-bar {padding-bottom:env(safe-area-inset-bottom,0px);}
    .new-skin-symbol .swiper-slide img[src*='poderosa777_banner'] {
        width:100%;height:auto;aspect-ratio:2.22;object-fit:cover;
    }
}
/* Desktop real: o JavaScript limita a escala fluida em 486 px. A partir de 1024 px,
   usamos uma base legivel de 16 px e reorganizamos apenas os componentes conhecidos.
   Celulares e tablets menores continuam usando integralmente o layout original. */
@media (min-width: 1024px) {
    :root {
        --p777-desktop-shell: 1440px;
        --p777-desktop-gutter: clamp(24px, 3vw, 48px);
        --p777-form-width: 760px;
        --p777-profile-width: 880px;
    }

    html {font-size:16px !important;}
    body {
        background:
            radial-gradient(70rem 34rem at 50% -18rem, rgba(187,7,22,.22), transparent 72%),
            #050506 !important;
    }
    #app, ion-app {
        width:100% !important;
        max-width:none !important;
        min-height:100vh !important;
    }
    ion-router-outlet.mx-auto {width:100% !important; max-width:none !important;}

    /* Cabecalho principal alinhado ao mesmo eixo do conteudo. */
    html.new-skin-symbol ion-toolbar.header {
        width:100% !important;
        max-width:var(--p777-desktop-shell) !important;
        margin-inline:auto !important;
        --padding-start:var(--p777-desktop-gutter) !important;
        --padding-end:var(--p777-desktop-gutter) !important;
        --min-height:4.25rem;
    }
    html.new-skin-symbol ion-toolbar.header .logo {max-width:11rem !important; height:2.625rem !important;}
    html.new-skin-symbol ion-toolbar.header .login,
    html.new-skin-symbol ion-toolbar.header .register {
        min-width:5.75rem !important;
        min-height:2.5rem !important;
        --padding-start:1rem !important;
        --padding-end:1rem !important;
        font-size:.8125rem !important;
    }

    /* Home: um shell unico evita tanto o corredor mobile quanto o conteudo espalhado. */
    html.new-skin-symbol #inicio .main-content .order-container {
        width:100% !important;
        max-width:var(--p777-desktop-shell) !important;
        margin-inline:auto !important;
        padding-inline:var(--p777-desktop-gutter) !important;
        box-sizing:border-box !important;
    }
    html.new-skin-symbol #inicio .main-content .order-container .swiper-c {
        width:100% !important;
        height:auto !important;
        max-height:none !important;
        margin:1.25rem auto 0 !important;
    }
    html.new-skin-symbol #inicio .swiper-poster {
        width:100% !important;
        max-width:1280px !important;
        height:auto !important;
        aspect-ratio:1280 / 570 !important;
        margin:0 auto !important;
        border-radius:1rem !important;
        overflow:hidden !important;
        box-shadow:0 14px 38px rgba(0,0,0,.38) !important;
    }
    html.new-skin-symbol #inicio .swiper-poster .swiper,
    html.new-skin-symbol #inicio .swiper-poster .swiper-wrapper,
    html.new-skin-symbol #inicio .swiper-poster .swiper-slide,
    html.new-skin-symbol #inicio .swiper-poster .poster-img {
        width:100% !important;
        height:100% !important;
    }
    html.new-skin-symbol #inicio .swiper-poster .poster-img {object-fit:cover !important; object-position:center !important;}

    /* Atalhos superiores com alvos maiores para mouse, sem alterar os cliques. */
    html.new-skin-symbol #inicio .scroll-box.layout1 .list-box {
        width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
        gap:.875rem !important;
    }
    html.new-skin-symbol #inicio .scroll-box.layout1 .list-box > li {
        width:auto !important;
        min-width:0 !important;
        min-height:5rem;
        border-radius:.75rem;
    }
    html.new-skin-symbol #inicio .tabbar-tabs-inicio-components-MarqueeView-default-index {
        margin-inline:0 !important;
        height:2.75rem !important;
    }

    /* Somente as grades de jogos da home viram grid. O menu lateral conserva seu flex. */
    html.new-skin-symbol #inicio .tabbar-tabs-inicio-components-GameWrapper-index {
        padding-inline:0 !important;
        margin-bottom:1.25rem !important;
    }
    html.new-skin-symbol #inicio .tabbar-tabs-inicio-components-GameWrapper-index .card-container {
        display:grid !important;
        grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
        gap:1rem !important;
    }
    html.new-skin-symbol #inicio .tabbar-tabs-inicio-components-GameWrapper-index .card-container > * {
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        flex:none !important;
    }
    html.new-skin-symbol #inicio .tabbar-tabs-inicio-components-GameWrapper-index .game-card {
        width:100% !important;
        min-width:0 !important;
        box-shadow:0 .5rem 1.25rem rgba(0,0,0,.24);
        transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    html.new-skin-symbol #inicio .tabbar-tabs-inicio-components-GameWrapper-index .game-card .game-img,
    html.new-skin-symbol #inicio .tabbar-tabs-inicio-components-GameWrapper-index .game-card ion-img {
        width:100% !important;
        height:100% !important;
    }

    /* Busca/categorias: barra lateral legivel e grade responsiva; o card panoramico
       de provedor (sem .order-2) continua ocupando a linha inteira. */
    html.new-skin-symbol .category-container .container {
        width:100% !important;
        max-width:var(--p777-desktop-shell) !important;
        margin-inline:auto !important;
        padding:1rem var(--p777-desktop-gutter) 1.5rem !important;
        box-sizing:border-box !important;
        gap:1.25rem !important;
    }
    html.new-skin-symbol .category-container .container .side {
        flex:0 0 9.5rem !important;
        width:9.5rem !important;
        max-width:9.5rem !important;
        padding-right:1rem !important;
        border-right:1px solid rgba(255,197,51,.12);
    }
    html.new-skin-symbol .category-container .container .side ion-segment ion-segment-button {
        min-height:4.25rem !important;
        margin-bottom:.625rem !important;
    }
    html.new-skin-symbol .category-container .container .side ion-segment ion-segment-button .label {
        font-size:.8125rem !important;
        line-height:1.15 !important;
    }
    html.new-skin-symbol .category-container .container #main {min-width:0 !important; flex:1 1 auto !important;}
    html.new-skin-symbol .category-container ion-grid ion-row {
        display:grid !important;
        grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr)) !important;
        gap:1rem !important;
    }
    html.new-skin-symbol .category-container ion-grid ion-col.card-col.order-2 {
        width:auto !important;
        max-width:none !important;
        flex:none !important;
        padding:0 !important;
    }
    html.new-skin-symbol .category-container ion-grid ion-col.card-col:not(.order-2) {
        grid-column:1 / -1 !important;
        width:100% !important;
        max-width:none !important;
    }

    /* Formularios financeiros e telas internas permanecem contidos e confortaveis. */
    html.new-skin-symbol ion-content.first-content,
    html.new-skin-symbol ion-content.common-ion-content {
        width:100% !important;
        max-width:var(--p777-form-width) !important;
        margin-inline:auto !important;
        --padding-start:1.5rem !important;
        --padding-end:1.5rem !important;
    }
    html.new-skin-symbol ion-content.first-content > *,
    html.new-skin-symbol ion-content.common-ion-content > * {
        width:100% !important;
        max-width:45rem !important;
        margin-left:auto !important;
        margin-right:auto !important;
        box-sizing:border-box !important;
    }
    html.new-skin-symbol .fixedBottom-footer {
        width:100% !important;
        max-width:var(--p777-form-width) !important;
        left:50% !important;
        transform:translateX(-50%) !important;
    }
    html.new-skin-symbol .fixedBottom-footer .btn-warp,
    html.new-skin-symbol .footer-assets {
        width:calc(100% - 3rem) !important;
        max-width:45rem !important;
    }

    /* Perfil: preserva o cabecalho fixed e o calculo de altura do aplicativo. */
    html.new-skin-symbol .mine {
        width:100% !important;
        max-width:var(--p777-profile-width) !important;
        margin-inline:auto !important;
    }
    html.new-skin-symbol .mine .user-base-info {
        width:min(100%, var(--p777-profile-width)) !important;
        max-width:var(--p777-profile-width) !important;
        left:50% !important;
        transform:translateX(-50%) !important;
        border-left:1px solid rgba(255,197,51,.1);
        border-right:1px solid rgba(255,197,51,.1);
        box-shadow:0 1rem 2.5rem rgba(0,0,0,.2);
    }
    html.new-skin-symbol .mine .user-tab-info {
        width:100% !important;
        max-width:var(--p777-profile-width) !important;
        margin-inline:auto !important;
        padding-inline:1.5rem !important;
        box-sizing:border-box !important;
    }
    html.new-skin-symbol .mine .my-vip,
    html.new-skin-symbol .mine .kf-nav,
    html.new-skin-symbol .mine .feature-tab {border-radius:.75rem;}

    /* Promocoes, indicacoes e resgate: paineis centrais em vez de faixas esticadas. */
    html.new-skin-symbol .activity-list,
    html.new-skin-symbol .recharge-container,
    html.new-skin-symbol .recharge-content {
        width:100% !important;
        max-width:68rem !important;
        margin-left:auto !important;
        margin-right:auto !important;
        box-sizing:border-box !important;
    }
    html.new-skin-symbol .agent-poster,
    html.new-skin-symbol .agent-content {
        width:100% !important;
        max-width:50rem !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
    html.new-skin-symbol .top-banner {
        max-width:42rem !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    /* Login/cadastro deixam de ocupar a tela inteira no computador. */
    ion-modal#login-modal,
    ion-modal#change-pw-modal {
        --width:min(35rem, calc(100vw - 3rem)) !important;
        --height:min(47rem, calc(100vh - 3rem)) !important;
        --max-width:35rem !important;
        --border-radius:1.25rem !important;
    }
    ion-modal#bind-account-modal {
        --width:min(35rem, calc(100vw - 3rem)) !important;
        --height:auto !important;
        --max-width:35rem !important;
        --border-radius:1.25rem !important;
    }
    ion-modal#login-modal::part(content),
    ion-modal#change-pw-modal::part(content),
    ion-modal#bind-account-modal::part(content) {
        max-width:35rem !important;
        border-radius:1.25rem !important;
        overflow:hidden !important;
        box-shadow:0 1.5rem 5rem rgba(0,0,0,.65) !important;
    }
    ion-modal#login-modal .warpper {max-width:35rem !important; margin-inline:auto !important;}

    /* Barra inferior vira um dock central, mantendo exatamente os mesmos destinos. */
    html.new-skin-symbol .tabbar-MainPage-components-Tabs-Tabs1-index,
    html.new-skin-symbol .outer-wrap,
    html.new-skin-symbol ion-tab-bar.tab-bar {
        width:min(48rem, calc(100% - 3rem)) !important;
        left:50% !important;
        right:auto !important;
        transform:translateX(-50%) !important;
        border-radius:1rem 1rem 0 0 !important;
        overflow:hidden !important;
        box-shadow:0 -1rem 2.5rem rgba(0,0,0,.34);
    }
    html.new-skin-symbol .tabbar-MainPage-components-Tabs-Tabs1-index ion-tab-bar,
    html.new-skin-symbol .outer-wrap .tab-bar,
    html.new-skin-symbol ion-tab-bar.tab-bar {
        border:1px solid rgba(255,197,51,.16) !important;
        border-bottom:0 !important;
        border-radius:1rem 1rem 0 0 !important;
    }

    /* Defesa explicita: containers homonimos do drawer nunca podem virar grid. */
    html.new-skin-symbol ion-menu .card-container {
        display:flex !important;
        flex-flow:column !important;
        grid-template-columns:none !important;
    }
}

@media (min-width: 1280px) {
    html.new-skin-symbol #inicio .tabbar-tabs-inicio-components-GameWrapper-index .card-container {
        grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1600px) {
    html.new-skin-symbol #inicio .tabbar-tabs-inicio-components-GameWrapper-index .card-container {
        grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    html.new-skin-symbol #inicio .game-card:hover {
        transform:translateY(-4px);
        filter:brightness(1.06);
        box-shadow:0 1rem 2rem rgba(0,0,0,.38);
    }
    html.new-skin-symbol #inicio .scroll-box.layout1 .list-box > li:hover,
    html.new-skin-symbol .category-container ion-segment-button:hover {
        filter:brightness(1.1);
    }
    html.new-skin-symbol ion-button:not([disabled]):hover {filter:brightness(1.06);}
}

@media (min-width: 1024px) {
    html.new-skin-symbol :where(a, button, [role='button']):focus-visible {
        outline:2px solid var(--p777-gold) !important;
        outline-offset:3px !important;
    }
}