/* =========================================================
   BSCINFOS - ESTILIZAÇÃO POR PLATAFORMA
   PC / TABLET / CELULAR
   ========================================================= */

:root {
    --platform-main-width: 1400px;
    --platform-main-padding: 30px;
    --platform-sidebar-width: 280px;
    --platform-gap: 25px;
    --platform-card-padding: 20px;
    --platform-font-scale: 1;
}

/* Seletor de plataforma */
.platform-switcher {
    position: fixed;
    top: 55px;
    right: 14px;
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgba(17,18,23,.96);
    border: 1px solid var(--borda-destaque, #2a2a35);
    border-radius: 9px;
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
}

.platform-switcher-label {
    color: var(--texto-secundario, #aaa);
    font-size: 10px;
    font-weight: 900;
    padding: 0 5px;
    text-transform: uppercase;
}

.platform-switch-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--texto, #fff);
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    transition: .18s ease;
}

.platform-switch-btn:hover {
    border-color: var(--accent-purple, #d3d3d3);
}

.platform-switch-btn.active {
    background: var(--accent-purple, #d3d3d3);
    color: #111;
    border-color: var(--accent-purple, #d3d3d3);
}

/* Variáveis de cada plataforma */
html[data-platform="pc"] {
    --platform-main-width: 1400px;
    --platform-main-padding: 30px;
    --platform-sidebar-width: 280px;
    --platform-gap: 25px;
    --platform-card-padding: 20px;
    --platform-font-scale: 1;
}

html[data-platform="tablet"] {
    --platform-main-width: 1080px;
    --platform-main-padding: 20px;
    --platform-sidebar-width: 230px;
    --platform-gap: 18px;
    --platform-card-padding: 16px;
    --platform-font-scale: .96;
}

html[data-platform="mobile"] {
    --platform-main-width: 100%;
    --platform-main-padding: 10px;
    --platform-sidebar-width: 100%;
    --platform-gap: 12px;
    --platform-card-padding: 12px;
    --platform-font-scale: .91;
}

/* =========================================================
   PC
   ========================================================= */
html[data-platform="pc"] .main-container {
    max-width: var(--platform-main-width);
    padding: var(--platform-main-padding);
}

html[data-platform="pc"] .brawlers-container,
html[data-platform="pc"] .times-container {
    gap: var(--platform-gap);
}

html[data-platform="pc"] .sidebar {
    width: var(--platform-sidebar-width);
    min-width: var(--platform-sidebar-width);
}

html[data-platform="pc"] .info-panel {
    padding: 30px;
}

html[data-platform="pc"] .scrins-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

/* =========================================================
   TABLET
   ========================================================= */
html[data-platform="tablet"] body {
    overflow-x: hidden;
}

html[data-platform="tablet"] .main-container {
    width: 100%;
    max-width: var(--platform-main-width);
    padding: var(--platform-main-padding);
}

html[data-platform="tablet"] .navbar {
    padding-left: 125px;
    padding-right: 125px;
}

html[data-platform="tablet"] .brawlers-container,
html[data-platform="tablet"] .times-container {
    gap: var(--platform-gap);
}

html[data-platform="tablet"] .sidebar {
    width: var(--platform-sidebar-width);
    min-width: var(--platform-sidebar-width);
}

html[data-platform="tablet"] .info-panel {
    padding: var(--platform-card-padding);
}

html[data-platform="tablet"] .modo-card {
    font-size: 17px;
    padding: 16px;
}

html[data-platform="tablet"] .mapa-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

html[data-platform="tablet"] .scrins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-platform="tablet"] .scrim-rounds-container {
    justify-content: flex-start;
}

/* =========================================================
   CELULAR
   ========================================================= */
html[data-platform="mobile"] {
    font-size: calc(16px * var(--platform-font-scale));
}

html[data-platform="mobile"] body {
    width: 100%;
    overflow-x: hidden;
}

html[data-platform="mobile"] .platform-switcher {
    top: auto;
    bottom: 10px;
    right: 10px;
    left: 10px;
    justify-content: center;
}

html[data-platform="mobile"] .platform-switcher-label {
    display: none;
}

html[data-platform="mobile"] .platform-switch-btn {
    flex: 1;
    padding: 8px 6px;
}

html[data-platform="mobile"] .navbar {
    width: 100%;
    padding: 12px 8px;
    overflow-x: auto;
    justify-content: flex-start;
}

html[data-platform="mobile"] .nav-links {
    width: max-content;
    gap: 12px;
    margin: 0 auto;
}

html[data-platform="mobile"] .nav-link {
    font-size: 11px;
    white-space: nowrap;
}

html[data-platform="mobile"] .main-container {
    width: 100%;
    max-width: 100%;
    padding: var(--platform-main-padding);
}

html[data-platform="mobile"] .page-header {
    margin-bottom: 18px;
}

html[data-platform="mobile"] .page-header h1 {
    font-size: 21px;
    line-height: 1.2;
}

html[data-platform="mobile"] .filter-container {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

html[data-platform="mobile"] .filter-select {
    min-width: 0;
    flex: 1 1 45%;
    padding: 9px 10px;
    font-size: 11px;
}

html[data-platform="mobile"] .brawlers-container,
html[data-platform="mobile"] .times-container {
    height: auto;
    min-height: 0;
    width: 100%;
    flex-direction: column;
    gap: var(--platform-gap);
}

html[data-platform="mobile"] .sidebar {
    width: 100%;
    min-width: 0;
    height: 210px;
    max-height: 210px;
}

html[data-platform="mobile"] .sidebar-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

html[data-platform="mobile"] .sidebar-item {
    min-width: 0;
    padding: 8px;
    font-size: 11px;
}

html[data-platform="mobile"] .info-panel {
    width: 100%;
    min-width: 0;
    padding: var(--platform-card-padding);
    overflow: visible;
}

html[data-platform="mobile"] .modo-card {
    font-size: 15px;
    padding: 13px 10px;
    gap: 8px;
}

html[data-platform="mobile"] .modo-header {
    padding: 12px;
    font-size: 13px;
}

html[data-platform="mobile"] .mapa-content {
    padding: 10px;
    grid-template-columns: 1fr;
    gap: 10px;
}

html[data-platform="mobile"] .excel-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

html[data-platform="mobile"] .synergy-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

html[data-platform="mobile"] .scrins-grid {
    grid-template-columns: 1fr;
}

html[data-platform="mobile"] .scrim-card {
    min-width: 0;
}

html[data-platform="mobile"] .scrim-rounds-container {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html[data-platform="mobile"] .scrim-round-btn {
    min-width: 105px;
    flex: 0 0 auto;
}

html[data-platform="mobile"] .round-details-view {
    padding: 12px;
    gap: 12px;
}

html[data-platform="mobile"] .scrim-picks-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

html[data-platform="mobile"] .map-middle-scrim {
    order: -1;
}

html[data-platform="mobile"] .map-middle-scrim img {
    width: min(100%, 320px);
    max-width: 100%;
    height: auto;
}

html[data-platform="mobile"] .team-picks-scrim {
    width: 100%;
}

html[data-platform="mobile"] .pick-row img {
    width: 46px;
    height: 46px;
}

/* MAPAS - adaptação das telas existentes */
html[data-platform="mobile"] .mapas-layout {
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

html[data-platform="mobile"] #sidebar-mapas {
    width: 100%;
    min-width: 0;
    max-height: 230px;
}

html[data-platform="mobile"] #painel-info-mapa {
    width: 100%;
    min-width: 0;
}

/* Formulários */
html[data-platform="mobile"] .form-group input,
html[data-platform="mobile"] .form-group select,
html[data-platform="mobile"] .form-group textarea {
    width: 100%;
    max-width: 100%;
}

html[data-platform="mobile"] .modal-jogador-card {
    max-width: calc(100vw - 20px);
    padding: 18px;
}

/* Imagens nunca devem estourar a largura no celular */
html[data-platform="mobile"] img {
    max-width: 100%;
}

/* =========================================================
   AJUSTES GERAIS PARA COMPONENTES ESPECÍFICOS
   ========================================================= */
html[data-platform="tablet"] .platform-switcher {
    right: 10px;
}

.platform-transition,
.platform-transition * {
    transition: width .2s ease, max-width .2s ease, padding .2s ease,
                gap .2s ease, grid-template-columns .2s ease;
}

/* =========================================================
   NAVEGAÇÃO LATERAL GLOBAL
   Todas as antigas navbars superiores são ocultadas e
   substituídas por este menu lateral.
   ========================================================= */
:root {
    --side-nav-width: 250px;
    --side-nav-bg: #101116;
    --side-nav-border: #2b2d38;
    --side-nav-accent: #d000ff;
    --side-nav-text: #f5f5f7;
    --side-nav-muted: #9698a7;
}

.legacy-top-navbar {
    display: none !important;
}

body.has-side-navigation {
    padding-left: var(--side-nav-width);
    box-sizing: border-box;
}

.bsc-side-nav {
    position: fixed;
    z-index: 99990;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--side-nav-width);
    box-sizing: border-box;
    background: linear-gradient(180deg, #111217 0%, #0c0d11 100%);
    border-right: 1px solid var(--side-nav-border);
    box-shadow: 8px 0 28px rgba(0,0,0,.28);
    color: var(--side-nav-text);
}

.side-nav-header {
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border-bottom: 1px solid #272934;
    box-sizing: border-box;
}

.side-nav-brand {
    color: #fff;
    text-decoration: none;
    font-size: 23px;
    font-weight: 950;
    letter-spacing: -.7px;
}

.side-nav-brand strong { color: #fff; }
.side-nav-brand span { color: var(--side-nav-accent); }

.side-nav-close,
.side-nav-toggle {
    border: 0;
    cursor: pointer;
    color: #fff;
    background: #1a1b22;
}

.side-nav-close {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 25px;
    line-height: 1;
}

.side-nav-scroll {
    height: calc(100vh - 74px);
    overflow-y: auto;
    padding: 12px 10px 20px;
    box-sizing: border-box;
    scrollbar-width: thin;
}

.side-nav-section {
    padding: 5px 0 13px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin-bottom: 8px;
}

.side-nav-section-title {
    color: #777a8a;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .9px;
    padding: 8px 11px 7px;
    text-transform: uppercase;
}

.side-nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 39px;
    box-sizing: border-box;
    padding: 8px 11px;
    margin: 2px 0;
    border-radius: 8px;
    color: #e9e9ee;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .15px;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.side-nav-link:hover {
    background: #1c1d25;
    color: #fff;
    transform: translateX(2px);
}

.side-nav-link.active {
    background: linear-gradient(90deg, rgba(208,0,255,.22), rgba(208,0,255,.06));
    border-left: 3px solid var(--side-nav-accent);
    padding-left: 8px;
    color: #fff;
}

.side-region-link img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 22px;
}

.side-screen-link {
    color: #c6c7d0;
}

.side-screen-link::before {
    content: "›";
    color: var(--side-nav-accent);
    font-size: 16px;
    line-height: 1;
}

.side-style-section {
    border-bottom: 0;
    padding-bottom: 8px;
}

.side-style-section .platform-switcher {
    position: static;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.side-style-section .platform-switch-btn {
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border: 1px solid #282a34;
    background: #17181e;
    color: #dfe0e7;
    border-radius: 8px;
    font-size: 10px;
}

.side-style-section .platform-switch-btn:hover {
    border-color: #9d00bd;
    background: #1d1e27;
}

.side-style-section .platform-switch-btn.active {
    background: var(--side-nav-accent);
    border-color: var(--side-nav-accent);
    color: #fff;
}

.side-nav-toggle {
    display: none;
    position: fixed;
    z-index: 100001;
    top: 12px;
    left: 12px;
    width: 44px;
    height: 44px;
    padding: 9px;
    border: 1px solid #333540;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.side-nav-toggle span {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: #fff;
    border-radius: 2px;
}

.side-nav-backdrop {
    display: none;
}

/* O conteúdo das páginas continua responsivo, agora partindo da lateral. */
html[data-platform="pc"] {
    --side-nav-width: 250px;
}

html[data-platform="tablet"] {
    --side-nav-width: 220px;
}

html[data-platform="tablet"] body.has-side-navigation {
    padding-left: var(--side-nav-width);
}

html[data-platform="tablet"] .bsc-side-nav {
    width: var(--side-nav-width);
}

html[data-platform="mobile"] {
    --side-nav-width: 0px;
}

html[data-platform="mobile"] body.has-side-navigation {
    padding-left: 0;
}

html[data-platform="mobile"] .bsc-side-nav {
    width: 280px;
    max-width: 84vw;
    transform: translateX(-105%);
    transition: transform .22s ease;
}

html[data-platform="mobile"] body.side-nav-open .bsc-side-nav {
    transform: translateX(0);
}

html[data-platform="mobile"] .side-nav-toggle {
    display: block;
}

html[data-platform="mobile"] .side-nav-close {
    display: block;
}

html[data-platform="mobile"] .side-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99980;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(2px);
}

html[data-platform="mobile"] body.side-nav-open .side-nav-backdrop {
    display: block;
}

html[data-platform="mobile"] .side-nav-header {
    height: 65px;
}

html[data-platform="mobile"] .side-nav-scroll {
    height: calc(100vh - 65px);
}

html[data-platform="mobile"] .main-container {
    padding-top: 65px;
}

html[data-platform="mobile"] .wrapper,
html[data-platform="mobile"] .teams-wrapper,
html[data-platform="mobile"] .found-page {
    padding-top: 65px;
}

/* Tablet também usa uma lateral fixa, com tamanho reduzido. */
html[data-platform="tablet"] .side-nav-header {
    height: 68px;
}

html[data-platform="tablet"] .side-nav-scroll {
    height: calc(100vh - 68px);
}

/* Não deixar a antiga regra do switcher móvel voltar a colocá-lo no rodapé. */
html[data-platform="mobile"] .platform-switcher {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
}

/* =========================================================
   OVERRIDES DA NOVA NAVBAR LATERAL
   Mantidos em CSS externo para não misturar estilo com HTML/JS.
   ========================================================= */
body.has-side-navigation {
    padding-left: var(--side-nav-width, 250px);
    transition: padding-left .22s ease;
}
body.has-side-navigation.side-nav-closed { padding-left: 0 !important; }

.bsc-side-nav {
    transform: translateX(0) !important;
    transition: transform .22s ease, width .22s ease !important;
}
body.side-nav-closed .bsc-side-nav { transform: translateX(-105%) !important; }

.side-nav-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid #30323d;
    border-radius: 8px;
    background: #191a21;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.side-nav-close:hover { background: #d000ff; border-color: #d000ff; }

.side-nav-user {
    padding: 14px 16px 13px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.012);
}
.side-nav-user-label {
    display: block;
    margin-bottom: 5px;
    color: #777a8a;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.side-nav-user-name {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-nav-user-name::before { content: '@'; color: #d000ff; margin-right: 2px; }

.side-nav-scroll { height: calc(100vh - 126px) !important; }

.side-style-section .platform-switcher {
    position: static !important;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.side-style-section .platform-switch-btn {
    min-width: 0;
    min-height: 68px;
    padding: 7px 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #292b35;
    border-radius: 9px;
    background: #17181e;
    color: #dfe0e7;
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
}
.side-style-section .platform-switch-btn img { width: 28px; height: 28px; object-fit: contain; opacity: .85; }
.side-style-section .platform-switch-btn:hover { border-color: #d000ff; background: #1d1e27; }
.side-style-section .platform-switch-btn.active { background: #d000ff; border-color: #d000ff; color: #fff; }
.side-style-section .platform-switch-btn.active img { opacity: 1; }

.side-nav-toggle {
    display: flex !important;
    position: fixed !important;
    z-index: 100001 !important;
    top: 12px;
    left: calc(var(--side-nav-width, 250px) - 54px);
    width: 42px;
    height: 42px;
    padding: 8px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #333540;
    border-radius: 10px;
    background: #1a1b22;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    cursor: pointer;
    transition: left .22s ease, background .15s ease, border-color .15s ease;
}
body.side-nav-closed .side-nav-toggle { left: 12px; }
.side-nav-toggle:hover { background: #d000ff; border-color: #d000ff; }
.side-nav-toggle span { display: block; width: 20px; height: 2px; margin: 2px 0; background: #fff; border-radius: 2px; }

html[data-platform="pc"] { --side-nav-width: 250px; }
html[data-platform="tablet"] { --side-nav-width: 220px; }
html[data-platform="mobile"] { --side-nav-width: 280px; }

html[data-platform="mobile"] body.has-side-navigation { padding-left: 0 !important; }
html[data-platform="mobile"] .bsc-side-nav { width: min(280px, 86vw) !important; transform: translateX(-105%) !important; }
html[data-platform="mobile"] body.side-nav-open .bsc-side-nav { transform: translateX(0) !important; }
html[data-platform="mobile"] body.side-nav-open .side-nav-toggle { left: calc(min(280px, 86vw) - 54px); }
html[data-platform="mobile"] .side-nav-toggle { left: 12px; }
html[data-platform="mobile"] .side-nav-header { min-height: 65px; }
html[data-platform="mobile"] .side-nav-backdrop { display: none; }
html[data-platform="mobile"] body.side-nav-open .side-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 99980; background: rgba(0,0,0,.65); backdrop-filter: blur(2px); }

html[data-platform="tablet"] body.has-side-navigation { padding-left: var(--side-nav-width); }
html[data-platform="tablet"] .bsc-side-nav { width: var(--side-nav-width) !important; }
html[data-platform="tablet"] .side-nav-header { min-height: 68px; }

body.side-nav-closed .side-nav-backdrop { display: none !important; }

/* =========================================================
   AVISO DO DRAFT NO CELULAR
   Aparece somente quando a interface CELULAR está selecionada
   e o aparelho está na vertical.
   ========================================================= */
.draft-mobile-warning {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 6, 10, .88);
    backdrop-filter: blur(7px);
}

.draft-mobile-warning.hidden {
    display: none;
}

.draft-mobile-warning-card {
    width: min(92vw, 430px);
    padding: 28px 24px;
    text-align: center;
    background: #111217;
    border: 1px solid #343542;
    border-radius: 18px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .65), 0 0 30px rgba(255, 0, 255, .12);
}

.draft-mobile-warning-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff00ff, #8800ff);
    color: #fff;
    font-size: 30px;
    font-weight: 900;
}

.draft-mobile-warning-card h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
}

.draft-mobile-warning-card p {
    margin: 0 auto 22px;
    max-width: 360px;
    color: #c8c9d2;
    font-size: 14px;
    line-height: 1.55;
}

.draft-mobile-warning-close {
    border: 0;
    border-radius: 9px;
    padding: 11px 26px;
    background: linear-gradient(135deg, #ff00ff, #8800ff);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
}

.draft-mobile-warning-close:hover {
    filter: brightness(1.12);
}

/* No celular em modo paisagem o Draft ocupa melhor a tela. */
html[data-platform="mobile"] body:has(.draft-mobile-warning) .draft-mobile-warning {
    display: flex;
}

@media (orientation: landscape) {
    .draft-mobile-warning {
        display: none !important;
    }
}

/* =========================================================
   AJUSTES DA NAVEGAÇÃO LATERAL — REGIÕES + SEÇÕES
   ========================================================= */

/* Cada região usa sua própria cor quando está aberta. */
body.region-theme-SA { --region-accent: #ff3333; --region-soft: rgba(255,51,51,.18); }
body.region-theme-NA { --region-accent: #22c55e; --region-soft: rgba(34,197,94,.18); }
body.region-theme-EMEA { --region-accent: #3b82f6; --region-soft: rgba(59,130,246,.18); }
body.region-theme-EA { --region-accent: #ff4fd8; --region-soft: rgba(255,79,216,.18); }
body.region-theme-ALL { --region-accent: #facc15; --region-soft: rgba(250,204,21,.18); }

.side-regions-section > .side-region-link.active {
    color: #fff !important;
    border-left: 3px solid var(--region-accent, #d000ff) !important;
    padding-left: 8px;
    background: linear-gradient(90deg, var(--region-soft, rgba(208,0,255,.22)), transparent) !important;
}

.side-regions-section > .side-region-link.active:hover {
    background: linear-gradient(90deg, var(--region-soft, rgba(208,0,255,.22)), transparent) !important;
}

/* As SEÇÕES ficam imediatamente abaixo da região atualmente aberta. */
.side-regions-section > .side-current-region {
    margin: 2px 0 9px 12px;
    padding: 2px 0 5px 8px;
    border-left: 2px solid var(--region-accent, #d000ff);
    border-bottom: 0;
    background: transparent;
}

.side-regions-section > .side-current-region .side-nav-section-title {
    color: var(--region-accent, #d000ff);
    padding: 7px 9px 5px;
}

.side-regions-section > .side-current-region .side-nav-link {
    min-height: 32px;
    margin: 1px 0;
    padding: 6px 9px;
    color: #d8d9df !important;
    font-size: 11px;
}

.side-regions-section > .side-current-region .side-nav-link:hover {
    color: #fff !important;
    background: var(--region-soft, rgba(208,0,255,.12));
    transform: translateX(2px);
}

.side-regions-section > .side-current-region .side-screen-link::before {
    color: var(--region-accent, #d000ff);
}

/* A cor da região também aparece no estado ativo dos links internos. */
body.region-theme-SA .side-regions-section > .side-current-region .side-screen-link.active,
body.region-theme-NA .side-regions-section > .side-current-region .side-screen-link.active,
body.region-theme-EMEA .side-regions-section > .side-current-region .side-screen-link.active,
body.region-theme-EA .side-regions-section > .side-current-region .side-screen-link.active,
body.region-theme-ALL .side-regions-section > .side-current-region .side-screen-link.active {
    border-left-color: var(--region-accent) !important;
    background: var(--region-soft) !important;
}

/* =========================================================
   REGIÕES — BLOCO DA REGIÃO + SEÇÕES
   ========================================================= */
.side-region-block {
    display: block;
    width: 100%;
}

.side-region-block .side-current-region {
    width: calc(100% - 12px);
}

/* Cada região usa sua própria cor quando selecionada.
   As regras específicas anulam a cor roxa padrão da navbar. */
.side-regions-section > .region-block-SA > .side-region-link.active {
    --region-accent: #ff3333;
    --region-soft: rgba(255,51,51,.20);
    background: linear-gradient(90deg, rgba(255,51,51,.22), rgba(255,51,51,.06)) !important;
    border-left-color: #ff3333 !important;
}

.side-regions-section > .region-block-NA > .side-region-link.active {
    --region-accent: #22c55e;
    --region-soft: rgba(34,197,94,.20);
    background: linear-gradient(90deg, rgba(34,197,94,.22), rgba(34,197,94,.06)) !important;
    border-left-color: #22c55e !important;
}

.side-regions-section > .region-block-EMEA > .side-region-link.active {
    --region-accent: #3b82f6;
    --region-soft: rgba(59,130,246,.20);
    background: linear-gradient(90deg, rgba(59,130,246,.22), rgba(59,130,246,.06)) !important;
    border-left-color: #3b82f6 !important;
}

.side-regions-section > .region-block-EA > .side-region-link.active {
    --region-accent: #ff4fd8;
    --region-soft: rgba(255,79,216,.20);
    background: linear-gradient(90deg, rgba(255,79,216,.22), rgba(255,79,216,.06)) !important;
    border-left-color: #ff4fd8 !important;
}

.side-regions-section > .region-block-ALL > .side-region-link.active {
    --region-accent: #facc15;
    --region-soft: rgba(250,204,21,.20);
    background: linear-gradient(90deg, rgba(250,204,21,.22), rgba(250,204,21,.06)) !important;
    border-left-color: #facc15 !important;
    color: #fff !important;
}

/* O bloco de SEÇÕES fica preso à região aberta. */
.side-regions-section > .region-block-SA.is-open .side-current-region,
.side-regions-section > .region-block-NA.is-open .side-current-region,
.side-regions-section > .region-block-EMEA.is-open .side-current-region,
.side-regions-section > .region-block-EA.is-open .side-current-region,
.side-regions-section > .region-block-ALL.is-open .side-current-region {
    margin: 0 0 8px 12px;
}

.side-regions-section > .region-block-SA.is-open .side-current-region { border-left-color: #ff3333; }
.side-regions-section > .region-block-NA.is-open .side-current-region { border-left-color: #22c55e; }
.side-regions-section > .region-block-EMEA.is-open .side-current-region { border-left-color: #3b82f6; }
.side-regions-section > .region-block-EA.is-open .side-current-region { border-left-color: #ff4fd8; }
.side-regions-section > .region-block-ALL.is-open .side-current-region { border-left-color: #facc15; }

.side-regions-section > .region-block-SA.is-open .side-nav-section-title { color: #ff3333; }
.side-regions-section > .region-block-NA.is-open .side-nav-section-title { color: #22c55e; }
.side-regions-section > .region-block-EMEA.is-open .side-nav-section-title { color: #3b82f6; }
.side-regions-section > .region-block-EA.is-open .side-nav-section-title { color: #ff4fd8; }
.side-regions-section > .region-block-ALL.is-open .side-nav-section-title { color: #facc15; }

.side-regions-section > .region-block-SA.is-open .side-screen-link::before { color: #ff3333; }
.side-regions-section > .region-block-NA.is-open .side-screen-link::before { color: #22c55e; }
.side-regions-section > .region-block-EMEA.is-open .side-screen-link::before { color: #3b82f6; }
.side-regions-section > .region-block-EA.is-open .side-screen-link::before { color: #ff4fd8; }
.side-regions-section > .region-block-ALL.is-open .side-screen-link::before { color: #facc15; }

/* =========================================================
   DRAFT — APROVEITAR TODA A LARGURA DISPONÍVEL
   Remove o espaço vazio lateral causado pelo max-width global.
   ========================================================= */
body.draft-page .main-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[data-platform="pc"] body.draft-page .main-container {
    width: 100% !important;
    max-width: none !important;
}

html[data-platform="tablet"] body.draft-page .main-container,
html[data-platform="mobile"] body.draft-page .main-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* =========================================================
   AJUSTES FINAIS — ALL + SEÇÕES + DRAFT MOBILE
   ========================================================= */

/* A palavra SEÇÕES não é exibida; os links continuam visíveis. */
.side-current-region .side-nav-section-title {
    display: none !important;
}

/* Garante que a região selecionada use sua própria cor, sem o roxo padrão. */
.side-regions-section .region-block-SA > .side-region-link.active {
    background: linear-gradient(90deg, rgba(255,51,51,.24), rgba(255,51,51,.06)) !important;
    border-left-color: #ff3333 !important;
}
.side-regions-section .region-block-NA > .side-region-link.active {
    background: linear-gradient(90deg, rgba(34,197,94,.24), rgba(34,197,94,.06)) !important;
    border-left-color: #22c55e !important;
}
.side-regions-section .region-block-EMEA > .side-region-link.active {
    background: linear-gradient(90deg, rgba(59,130,246,.24), rgba(59,130,246,.06)) !important;
    border-left-color: #3b82f6 !important;
}
.side-regions-section .region-block-EA > .side-region-link.active {
    background: linear-gradient(90deg, rgba(255,79,216,.24), rgba(255,79,216,.06)) !important;
    border-left-color: #ff4fd8 !important;
}
.side-regions-section .region-block-ALL > .side-region-link.active {
    background: linear-gradient(90deg, rgba(250,204,21,.24), rgba(250,204,21,.06)) !important;
    border-left-color: #facc15 !important;
}

/* =========================================================
   DRAFT NO CELULAR
   Esconde os painéis laterais para que BANS + PICKS + MAPA
   tenham toda a largura da tela. O JS calcula a escala do board.
   ========================================================= */
@media (max-width: 700px) {
    body.draft-page .main-container {
        padding: 0 6px 6px !important;
        gap: 0 !important;
    }

    body.draft-page .draft-area {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 100% !important;
        padding: 4px !important;
        border-radius: 12px !important;
    }

    body.draft-page .info-panels,
    body.draft-page .roster-area {
        display: none !important;
    }

    body.draft-page .vertical-layout {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    body.draft-page .draft-board-capture {
        transform: none !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 auto !important;
    }

    body.draft-page .top-controls {
        margin: 4px 6px 5px !important;
        padding: 6px 8px !important;
        min-height: 34px !important;
    }

    body.draft-page #timer-fase-label {
        font-size: 9px !important;
    }

    body.draft-page #timer-numero {
        font-size: 21px !important;
    }

    body.draft-page .timer-clock-icon {
        width: 24px !important;
        height: 24px !important;
    }
}

/* SCRINS: a barra de partidas permanece lateral em todas as interfaces. */
html[data-platform="pc"] .scrim-sets-layout {
    grid-template-columns: 190px minmax(0, 1fr);
}

html[data-platform="tablet"] .scrim-sets-layout {
    grid-template-columns: 180px minmax(560px, 1fr);
    overflow-x: auto;
}

html[data-platform="tablet"] .scrim-sets-sidebar {
    width: 180px;
    min-width: 180px;
}

html[data-platform="mobile"] .scrim-sets-layout {
    grid-template-columns: 170px minmax(520px, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
}

html[data-platform="mobile"] .scrim-sets-sidebar {
    width: 170px;
    min-width: 170px;
    height: 500px;
}

html[data-platform="mobile"] .scrim-set-content {
    min-width: 520px;
}

html[data-platform="mobile"] .scrim-set-content .round-details-view {
    min-width: 520px;
    overflow: hidden;
}

html[data-platform="mobile"] .scrim-picks-container {
    grid-template-columns: 120px minmax(180px, 220px) 120px;
    grid-template-rows: 1fr;
    overflow: hidden;
}

html[data-platform="mobile"] .scrim-team-picks-left,
html[data-platform="mobile"] .scrim-team-picks-right {
    flex-direction: column;
    flex-wrap: nowrap;
}

/* =========================================================
   COMING SOON - PLAYER / COACH
   ========================================================= */
.bsc-coming-soon-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

.bsc-coming-soon-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bsc-coming-soon-card {
    min-width: 260px;
    padding: 28px 32px;
    border: 1px solid var(--borda-destaque, #2a2a35);
    border-radius: 14px;
    background: var(--bg-cards, #181820);
    box-shadow: 0 18px 55px rgba(0,0,0,.5);
    text-align: center;
}

.bsc-coming-soon-title {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 18px;
}

.bsc-coming-soon-close {
    border: 1px solid var(--accent-purple, #d000ff);
    border-radius: 8px;
    padding: 9px 18px;
    background: transparent;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.bsc-coming-soon-close:hover {
    background: var(--accent-purple, #d000ff);
}

/* =========================================================
   DADOS / TIMES PERSONALIZADOS POR LOGIN
   ========================================================= */
.side-data-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.side-data-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 3px 7px;
    border: 1px solid rgba(208, 0, 255, .42);
    border-radius: 6px;
    background: rgba(208, 0, 255, .12);
    color: #e879f9;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2px;
}
.side-create-team-button {
    width: calc(100% - 2px);
    border: 1px solid rgba(208, 0, 255, .35);
    background: rgba(208, 0, 255, .07);
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.side-create-team-button:hover:not(:disabled) {
    background: rgba(208, 0, 255, .18);
    border-color: #d000ff;
}
.side-create-team-button:disabled {
    cursor: not-allowed;
    opacity: .48;
}
.side-create-team-plus {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #d000ff;
    color: #fff;
    font-size: 17px;
    line-height: 1;
}
.side-created-teams { display: grid; gap: 5px; margin-top: 5px; }
.side-created-team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;
    background: rgba(255,255,255,.025);
}
.side-created-team-logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    object-fit: contain;
    border-radius: 4px;
}
.side-created-team-info { display: grid; gap: 3px; min-width: 0; flex: 1; }
.side-created-team-info strong, .side-created-team-info span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-created-team-info strong { color: #f4f4f7; font-size: 11px; }
.side-created-team-info span { color: #9293a2; font-size: 10px; }
.side-created-team-remove {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #999aaa;
    font-size: 18px;
    cursor: pointer;
}
.side-created-team-remove:hover { background: rgba(255,70,90,.15); color: #ff6477; }
.side-create-team-overlay {
    position: fixed;
    inset: 0;
    z-index: 100500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(5px);
}
.side-create-team-overlay.show { display: flex; }
.side-create-team-dialog {
    position: relative;
    width: min(100%, 440px);
    max-height: min(90vh, 760px);
    overflow: auto;
    padding: 25px;
    border: 1px solid #343541;
    border-radius: 15px;
    background: #17181f;
    color: #f4f4f7;
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.side-create-team-dialog h2 { margin: 0 30px 7px 0; font-size: 22px; }
.side-create-team-dialog p { margin: 0 0 20px; color: #a3a4b4; font-size: 13px; }
.side-create-team-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: #252630;
    color: white;
    font-size: 22px;
    cursor: pointer;
}
.side-create-team-form { display: grid; gap: 14px; }
.side-create-team-form label { display: grid; gap: 7px; color: #d7d7e0; font-size: 12px; font-weight: 800; }
.side-create-team-form input {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #373844;
    border-radius: 8px;
    outline: none;
    background: #101116;
    color: #fff;
    font: inherit;
    font-weight: 500;
}
.side-create-team-form input:focus { border-color: #d000ff; box-shadow: 0 0 0 2px rgba(208,0,255,.13); }
.side-create-team-form input[type="file"] { padding: 7px; font-size: 11px; }
.side-create-team-error { min-height: 0; color: #ff7888; font-size: 12px; }
.side-create-team-submit {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: #d000ff;
    color: white;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.side-create-team-submit:hover { filter: brightness(1.12); }
@media (max-width: 700px) {
    .side-create-team-dialog { padding: 20px 16px; }
}
.side-created-team-empty {
    padding: 8px 7px;
    color: #9293a2;
    font-size: 10px;
    line-height: 1.4;
}
.side-created-team-owner {
    color: #d000ff !important;
    font-size: 9px !important;
}


/* Times criados na barra lateral podem ser abertos como páginas de perfil. */
.side-created-team-clickable { cursor: pointer; }
.side-created-team-clickable:hover { border-color: var(--side-nav-accent, #d000ff); background: rgba(208,0,255,.09); }
.side-created-team-clickable:focus-visible { outline: 2px solid var(--side-nav-accent, #d000ff); outline-offset: 2px; }

/* Página de perfil de time criado */
.custom-team-page { width: min(1050px, calc(100% - 36px)); margin: 54px auto 40px; color: var(--texto, #f5f5f7); }
.custom-team-back { display: inline-flex; margin-bottom: 22px; color: #d000ff; text-decoration: none; font-weight: 800; }
.custom-team-card { background: var(--bg-cards, #181820); border: 1px solid var(--borda-destaque, #2b2d38); border-radius: 14px; padding: clamp(20px, 4vw, 38px); }
.custom-team-heading { display: flex; align-items: center; gap: 22px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.custom-team-logo { width: 112px; height: 112px; object-fit: contain; border-radius: 14px; background: #111217; border: 1px solid #30313b; }
.custom-team-title { margin: 0 0 8px; font-size: clamp(25px, 4vw, 38px); font-weight: 950; overflow-wrap: anywhere; }
.custom-team-abbreviation { color: #d000ff; font-size: 17px; font-weight: 900; text-transform: uppercase; }
.custom-team-subtitle { color: var(--texto-secundario, #a0a0b0); margin-top: 8px; font-size: 13px; }
.custom-team-details { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 24px; }
.custom-team-detail { padding: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); border-radius: 10px; min-width: 0; }
.custom-team-detail-label { display: block; color: #9294a5; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 9px; }
.custom-team-detail-value { font-size: 18px; font-weight: 850; overflow-wrap: anywhere; }
.custom-team-error { padding: 28px; border: 1px solid #39303e; background: #181820; border-radius: 12px; }
@media (max-width: 600px) { .custom-team-page { width: calc(100% - 24px); margin-top: 72px; } .custom-team-heading { align-items: flex-start; gap: 14px; } .custom-team-logo { width: 78px; height: 78px; } .custom-team-details { grid-template-columns: 1fr; } }


/* IDENTIDADE AZUL BSCINFOS — substitui acentos roxos da navegação global */
:root { --side-nav-accent:#0076FE; --accent-purple:#0076FE; --accent:#0076FE; }
.bsc-side-nav, .bsc-side-nav * { --side-nav-accent:#0076FE; }
.side-nav-brand span, .side-nav-user-name::before { color:#0076FE !important; }
.side-nav-close:hover, .side-nav-toggle:hover { background:#0076FE !important; border-color:#0076FE !important; }
.side-style-section .platform-switch-btn:hover { border-color:#0076FE !important; }
.side-style-section .platform-switch-btn.active { background:#0076FE !important; border-color:#0076FE !important; }
.side-nav-item.active, .side-nav-link.active, .side-nav-section a.active { border-color:#0076FE !important; }
.side-nav-item:hover, .side-nav-link:hover, .side-nav-section a:hover { border-color:#0076FE !important; }
.side-nav-brand { display:flex; align-items:center; gap:7px; overflow:hidden; }
.side-nav-brand .brand-mark { width:34px; height:34px; object-fit:contain; flex:0 0 34px; transition:transform .65s cubic-bezier(.2,.8,.2,1); }
.side-nav-brand .brand-word { color:#fff !important; white-space:nowrap; opacity:0; max-width:0; overflow:hidden; transform:translateX(-10px); transition:opacity .3s ease,max-width .4s ease,transform .4s ease; }
.side-nav-brand:hover .brand-mark { transform:rotate(360deg); }
.side-nav-brand:hover .brand-word { opacity:1; max-width:110px; transform:translateX(0); }


/* Conta e teste grátis */
.side-nav-user-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bsc-logout-btn{border:1px solid #3b4558;background:#202431;color:#e8edf7;border-radius:6px;padding:5px 9px;font-size:11px;font-weight:800;cursor:pointer}
.bsc-logout-btn:hover{border-color:#0076fe;color:#fff}
.bsc-trial-clock{display:flex;align-items:center;gap:7px;margin-top:9px;color:#70b7ff;font-size:11px;font-weight:800}
.bsc-trial-clock[hidden]{display:none}
.bsc-trial-clock img{width:17px;height:17px;object-fit:contain}
.bsc-trial-logout-modal{position:fixed;inset:0;z-index:100200;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:18px}
.bsc-trial-logout-card{width:min(440px,100%);background:#151821;border:1px solid #343b4d;border-radius:13px;padding:24px;color:#f5f7fb;box-shadow:0 20px 70px #000b;text-align:center}
.bsc-trial-logout-card p{font-size:14px;line-height:1.6;color:#d8deea;margin:0 0 18px}
.bsc-trial-logout-card strong{display:block;margin-bottom:18px}
.bsc-trial-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bsc-trial-actions button{border-radius:8px;padding:10px 14px;font-weight:800;cursor:pointer}
.bsc-trial-continue{background:#075dbb;border:1px solid #0076fe;color:#fff}
.bsc-trial-exit{background:#282d39;border:1px solid #4b5364;color:#fff}
.bsc-social-footer{position:fixed;z-index:99980;left:calc(var(--side-nav-width,250px) + 18px);right:18px;bottom:8px;display:flex;justify-content:center;align-items:center;gap:22px;padding:7px 12px;background:rgba(12,14,20,.82);border:1px solid rgba(0,118,254,.18);border-radius:9px;backdrop-filter:blur(8px);font-size:11px}
.bsc-social-footer a{display:flex;align-items:center;gap:6px;color:#cbd5e1;text-decoration:none;font-weight:800}
.bsc-social-footer a span{color:#1684ff;font-size:15px}
@media(max-width:700px){.bsc-social-footer{left:8px;right:8px;bottom:58px;gap:13px;font-size:10px;padding:6px}}