/* 505bet — tema azul moderno, aplicado sobre os componentes existentes */
:root {
    --blue-bg: #031735;
    --blue-panel: #082653;
    --blue-panel-2: #0b3165;
    --blue-line: rgba(54, 205, 255, .48);
    --blue-glow: #19c9ff;
    --blue-text: #f4fbff;
    --blue-muted: #9bb8d7;
}

html, body, ion-app, ion-router-outlet, .ion-page, .main-page {
    background: var(--blue-bg) !important;
    color: var(--blue-text) !important;
}

.main-page {
    min-height: 100vh;
    background: radial-gradient(circle at 50% -10%, #104b85 0, #061e45 38%, #02132e 100%) !important;
}

.main-page ion-header,
.main-page ion-toolbar,
.main-page .toolbar {
    --background: transparent !important;
    background: transparent !important;
    color: var(--blue-text) !important;
}

.main-page .pwa-header-wrap { display: none !important; }
.main-page .toolbar { min-height: 4.5rem; padding-inline: 1rem !important; }
.main-page .toolbar .menu-btn { color: var(--blue-glow) !important; }
.main-page .toolbar .button-box {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
}
.main-page .toolbar .login,
.main-page .toolbar .register {
    min-height: 2.25rem !important;
    padding-inline: .9rem !important;
    border: 1px solid rgba(49, 202, 255, .5) !important;
    background: rgba(8, 56, 111, .7) !important;
    color: #dff8ff !important;
}
.main-page .menu-icon,
.main-page .toolbar ion-icon { color: var(--blue-glow) !important; }

.main-page .game-wrapper { background: transparent !important; padding-bottom: 5rem; }
.main-page .game-head {
    margin: .5rem 1rem 1rem !important;
    padding: .75rem 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(74, 194, 255, .18) !important;
}
.main-page .game-head .logo-c,
.main-page .game-head .logo-c .wall.logo {
    display: flex !important;
    align-items: center !important;
}
.main-page .game-head .logo-c img,
.main-page .game-head .logo-c ion-img {
    width: auto !important;
    max-width: 10rem !important;
    height: 2.25rem !important;
    object-fit: contain !important;
}

.main-page .game-content { background: transparent !important; padding: 0 1rem !important; }
.main-page .game-content .swiper-poste,
.main-page .game-content .poster,
.main-page .game-content .banner { border-radius: 1rem !important; overflow: hidden !important; }
.main-page .game-content > .swiper { border-radius: 1rem !important; overflow: hidden !important; }
.main-page .game-content .card-container {
    gap: .75rem !important;
    padding: .75rem 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}
.main-page .game-content .game-card {
    background: linear-gradient(145deg, #0a3b74, #061d47) !important;
    border: 1px solid var(--blue-line) !important;
    border-radius: .9rem !important;
    box-shadow: 0 0 .9rem rgba(13, 193, 255, .18) !important;
    overflow: hidden !important;
}
.main-page .game-content .game-card .game-img,
.main-page .game-content .game-card ion-img.game-img {
    border-radius: .75rem !important;
    overflow: hidden !important;
}
.main-page .game-content .game-card .game-name,
.main-page .game-content .game-card .name {
    color: var(--blue-text) !important;
}

.main-page .tab-bar,
.main-page .tab-bar .inner-wrap {
    background: rgba(3, 24, 57, .96) !important;
    border-top: 1px solid var(--blue-line) !important;
    box-shadow: 0 -0.25rem 1.2rem rgba(0, 174, 255, .2) !important;
}
.main-page .tab-bar .tab-btn {
    color: var(--blue-muted) !important;
    background: transparent !important;
}
.main-page .tab-bar .tab-btn.active-tab,
.main-page .tab-bar .tab-btn.active {
    color: var(--blue-glow) !important;
    text-shadow: 0 0 .75rem rgba(25, 201, 255, .75) !important;
}
.main-page .tab-bar .tab-btn ion-icon,
.main-page .tab-bar .tab-btn ion-img { filter: drop-shadow(0 0 .35rem rgba(25, 201, 255, .45)); }

.main-page ion-button,
.main-page button {
    --background: linear-gradient(100deg, #08b9f4, #1478ff) !important;
    --color: #fff !important;
    border-radius: 999px !important;
}

@media (max-width: 520px) {
    .main-page .game-head { margin-inline: .75rem !important; }
    .main-page .game-content { padding-inline: .75rem !important; }
    .main-page .game-content .game-card { border-radius: .7rem !important; }
    .main-page .game-content .card-container { gap: .5rem !important; }
}