/* ═══════════════════════════════════════════════════════════
   GolScanner — RESPONSIVIDADE & BREAKPOINTS ESPECÍFICOS
   (Todas as configurações para telas menores reunidas aqui)
   ═══════════════════════════════════════════════════════════ */

/* =====================================================================
   1. TELAS MENORES QUE 1330px (NOTEBOOKS / TELAS MÉDIAS)
   ===================================================================== */
@media (max-width: 1330px) {
  /* 1. Desaparece o bloco onde ficam os cards laterais */
  .layout {
    grid-template-columns: 1fr !important;
    height: calc(100vh - 104px) !important;
  }

  .side-panel {
    display: none !important;
  }

  /* Desabilita/oculta o botão 🖥 que envia o card para o painel lateral */
  .act-btn[data-role="gerar-card"] {
    display: none !important;
  }

  /* 2. Adaptação do HUB / Dashboard para não cortar embaixo, encolher para caber e criar rolagem Y */
  body[data-view-mode="dashboard"] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .dashboard-view {
    height: calc(100vh - 104px) !important;
    max-height: calc(100vh - 104px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 12px 10px !important;
    gap: 8px !important;
    grid-template-columns: 200px 1fr 270px !important;
    grid-template-rows: auto minmax(230px, 1fr) !important;
  }

  /* Títulos de seção compactos */
  .dash-section-title {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
  }

  /* Coluna Esquerda: Estratégias */
  .dash-estrategias {
    padding: 8px 10px !important;
  }
  .dash-estrategias-header {
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
  }
  #dash-lista-estrategias {
    gap: 6px !important;
  }
  .dash-estrategia-item {
    padding: 5px 8px !important;
    gap: 8px !important;
  }
  .dash-estr-nome {
    font-size: 11.5px !important;
  }
  .dash-estr-badge {
    font-size: 10px !important;
  }

  /* Bloco Central: Resultado e KPIs encolhidos para caber */
  .dash-resultado {
    padding: 8px 10px !important;
  }
  .dash-kpi-grid {
    gap: 6px !important;
  }
  .dash-kpi-card {
    padding: 4px 6px !important;
  }
  .dash-kpi-valor {
    font-size: 17px !important;
  }
  .dash-kpi-duplo .dash-kpi-valor {
    font-size: 13px !important;
  }
  .dash-kpi-label {
    font-size: 8.5px !important;
  }
  .dash-kpi-duplo .dash-kpi-label {
    font-size: 7.5px !important;
    margin-top: 1px !important;
  }
  .dash-kpi-divider {
    height: 20px !important;
  }
  .dash-kpi-sub {
    margin-top: 2px !important;
    padding-top: 2px !important;
    font-size: 8.5px !important;
    gap: 3px !important;
  }
  .dash-kpi-sub-label {
    font-size: 8px !important;
  }

  /* Coluna Direita: Configurações encolhidas */
  .dash-config {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .dash-config-row-top {
    gap: 6px !important;
  }
  .dash-config-label {
    margin-left: 0 !important;
    font-size: 9px !important;
  }
  .dash-banca-box {
    min-height: 30px !important;
    padding: 3px 6px !important;
  }
  .dash-banca-valor {
    font-size: 12px !important;
  }
  .dash-switch-container {
    margin-left: 0 !important;
    height: 30px !important;
    gap: 5px !important;
  }
  .dash-switch-toggle {
    width: 34px !important;
    height: 18px !important;
  }
  .dash-switch-slider:before {
    height: 12px !important;
    width: 12px !important;
    left: 2px !important;
    bottom: 2px !important;
  }
  .dash-switch-toggle input:checked + .dash-switch-slider:before {
    transform: translateX(16px) !important;
  }
  .dash-switch-badge {
    font-size: 9.5px !important;
  }
  .dash-config-group {
    gap: 3px !important;
  }
  .dash-config-group label {
    font-size: 9px !important;
  }
  .dash-config-group select,
  .dash-config-group input {
    padding: 5px 8px !important;
    font-size: 11.5px !important;
  }
  .dash-config-total {
    padding-top: 5px !important;
    margin-top: auto !important;
  }
  .dash-config-total-label {
    font-size: 8.5px !important;
  }
  .dash-config-total-valor {
    font-size: 17px !important;
    margin-top: 1px !important;
  }

  /* Linha Inferior: Gráficos e Partidas */
  .dash-grafico-linha {
    padding: 8px 10px !important;
    min-height: 230px !important;
  }
  .dash-grafico-header {
    min-height: 22px !important;
    margin-bottom: 4px !important;
    padding-bottom: 4px !important;
  }
  .dash-card-extra {
    padding: 8px 10px !important;
    min-height: 230px !important;
  }
  .dash-extra-header {
    padding: 4px 8px !important;
    margin-bottom: 4px !important;
  }

  /* Calendário adaptado */
  .dash-cal-weekdays {
    gap: 3px !important;
    font-size: 8.5px !important;
  }
  .dash-cal-grid {
    gap: 3px !important;
  }
  .dash-cal-day {
    padding: 3px 2px !important;
    min-height: 34px !important;
    gap: 2px !important;
  }
  .dash-cal-day-valor {
    font-size: 10.5px !important;
    margin: 1px 0 !important;
  }
  .dash-cal-day-num,
  .dash-cal-day-ops {
    font-size: 8px !important;
  }
  .dash-cal-footer {
    padding-top: 2px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 1330px) and (min-width: 769px) {
  /* 2. Topo em 2 linhas:
     Linha 1: [GolScanner] à esquerda e switches [Ligar, CARDS/OFF/MINI, HUB, Menu] ao lado/direita
     Linha 2: Linha dedicada exclusiva para os 10 filtros */
  .topbar {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "logo controls"
      "filters filters" !important;
    align-items: center !important;
    gap: 8px 16px !important;
    height: auto !important;
    min-height: auto !important;
    padding: 8px 20px 10px !important;
  }

  .logo {
    grid-area: logo !important;
    justify-self: start !important;
  }

  .topbar-right {
    grid-area: controls !important;
    justify-self: stretch !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    position: relative !important;
    margin: 0 !important;
  }

  /* Agrupa os botões de Mutar Áudio e Menu colados à direita */
  .topbar-actions-right {
    position: absolute !important;
    right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .topbar-actions-right #btn-toggle-som,
  .topbar-actions-right #btn-menu-campeonatos {
    position: static !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  /* 3. A linha de filtros desce para uma linha dedicada que não quebra */
  .topbar-center {
    grid-area: filters !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: clamp(2px, 0.35vw, 4px) !important;
    width: 100% !important;
    background-color: var(--bg-hover) !important;
    border-radius: 8px !important;
    padding: 4px clamp(3px, 0.5vw, 8px) !important;
    margin: 0 !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    overflow-x: auto !important;
  }
  .topbar-block {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
}

/* =====================================================================
   2. TABLET / TELAS INTERMEDIÁRIAS (769px até 1000px)
   Entra no modo cards igual ao mobile, com 2 colunas de cards
   ===================================================================== */
@media (max-width: 1000px) and (min-width: 769px) {
  /* Mantém o switch CARDS / MINI ativo, ocultando apenas a opção FEED */
  .feed-view-mode-switch {
    display: inline-flex !important;
  }

  .feed-view-mode-switch .feed-view-btn[data-feed-mode="off"] {
    display: none !important;
  }
  .topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "logo controls"
      "filters filters" !important;

    width: 100%;
    min-width: 0;
  }

  .topbar-right {
    gap: clamp(10px, 1.8vw, 18px) !important;
  }

  .topbar-actions-right {
    gap: 6px !important;
  }

  .topbar-center {
    grid-area: filters;

    display: flex !important;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    gap: 8px;
    overflow: hidden;
  }

  .topbar-block {
    flex: 0 1 auto !important;

    min-width: 0 !important;
    max-width: 100%;

    box-sizing: border-box;
  }
  /* Grid com exatamente 2 colunas de cards */
  body.modo-cards-ativo #lista-jogos,
  #lista-jogos {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    align-content: start !important;
    box-sizing: border-box !important;
  }

  #lista-jogos .empty-state {
    grid-column: 1 / -1 !important;
  }

  body.modo-cards-ativo #lista-jogos.feed-vazio,
  body.modo-cards-ativo #lista-jogos:has(.empty-state),
  #lista-jogos.feed-vazio,
  #lista-jogos:has(.empty-state) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100vh - 180px) !important;
  }

  /* Card completo igual ao mobile */
  .suggestion-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 10px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* Barra com botões centralizados no topo do card (<1000px) */
  .suggestion-card-topbar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    min-height: 28px !important;
  }

  /* Oculta os botões do compactcard tradicional (popup/minimizar) */
  .suggestion-card-btn[data-role="compactar-toggle"],
  .suggestion-card-btn[data-role="fechar-compact"],
  .suggestion-card-btn[data-role="abrir-popup-fechar"] {
    display: none !important;
  }

  /* Botões X e Favorito centralizados e do mesmo tamanho (28x28px) */
  .card-btn-delete,
  .suggestion-card-btn.card-btn-favorito {
    position: static !important;
    transform: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    font-size: 15px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* No modo normal (CARDS), força exibição expandida completa dos cards */
  body:not(.modo-cards-mini) .suggestion-card.compacto .match-score-display,
  body:not(.modo-cards-mini) .suggestion-card.compacto .sug-footer {
    display: block !important;
  }

  body:not(.modo-cards-mini) .suggestion-card.compacto .intensity-chart {
    display: block !important;
  }

  body:not(.modo-cards-mini) .suggestion-card.compacto .compact-info-badge,
  body:not(.modo-cards-mini) .suggestion-card.compacto .compact-status-badges,
  body:not(.modo-cards-mini) .suggestion-card.compacto .compact-filtro-tag {
    display: none !important;
  }

  /* No modo MINI (compacto) entre 769px e 1000px: botões Fav e Excluir um em cada canto para não cobrir o nome da liga */
  body.modo-cards-mini .suggestion-card-topbar,
  body.modo-cards-mini .suggestion-card.compacto .suggestion-card-topbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 2px !important;
    min-height: 28px !important;
  }

  body.modo-cards-mini .suggestion-card-topbar .compact-card-league,
  body.modo-cards-mini
    .suggestion-card.compacto
    .suggestion-card-topbar
    .compact-card-league {
    display: inline-flex !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: calc(100% - 72px) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  body.modo-cards-mini .suggestion-card-topbar .card-btn-favorito,
  body.modo-cards-mini
    .suggestion-card.compacto
    .suggestion-card-topbar
    .card-btn-favorito {
    position: static !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    z-index: 2 !important;
  }

  body.modo-cards-mini .suggestion-card-topbar .card-btn-delete,
  body.modo-cards-mini
    .suggestion-card.compacto
    .suggestion-card-topbar
    .card-btn-delete {
    position: static !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    z-index: 2 !important;
  }

  /* ── Ajustes do HUB / Dashboard para telas de 769px até 1000px ── */
  .dashboard-view {
    grid-template-columns: 135px 1fr 210px !important;
    gap: 8px !important;
    padding: 6px 8px 10px !important;
  }

  /* Coluna 1 (Estratégias): Comprimida para 135px e oculta número de entradas para ganhar espaço */
  .dash-estrategias {
    padding: 6px 6px !important;
  }
  .dash-estrategias-header {
    margin-bottom: 4px !important;
    padding-bottom: 3px !important;
  }
  .dash-estrategias-header .dash-section-title {
    font-size: 10px !important;
  }
  .dash-estr-limpar-btn {
    width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
  }
  #dash-lista-estrategias {
    gap: 4px !important;
  }
  .dash-estrategia-item {
    padding: 4px 6px !important;
    gap: 4px !important;
  }
  .dash-estr-nome {
    font-size: 10.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  /* Remove a contagem numérica de entradas dentro dos cards de estratégia conforme solicitado */
  .dash-estr-badge {
    display: none !important;
  }

  /* Coluna 2 (Resultado & KPIs): Ajustado para caber no meio */
  .dash-resultado {
    padding: 6px 8px !important;
  }
  .dash-kpi-grid {
    gap: 4px !important;
  }
  .dash-kpi-card {
    padding: 3px 4px !important;
  }
  .dash-kpi-valor {
    font-size: 15px !important;
  }
  .dash-kpi-duplo .dash-kpi-valor {
    font-size: 11.5px !important;
  }
  .dash-kpi-label {
    font-size: 7.5px !important;
  }
  .dash-kpi-duplo .dash-kpi-label {
    font-size: 7px !important;
    margin-top: 1px !important;
  }
  .dash-kpi-divider {
    height: 18px !important;
    margin: 0 1px !important;
  }
  .dash-kpi-sub {
    font-size: 7.5px !important;
    margin-top: 1px !important;
    padding-top: 1px !important;
    gap: 2px !important;
  }
  .dash-kpi-sub-label {
    font-size: 7px !important;
  }

  /* Coluna 3 (Configurações & Partidas): Comprimida para 210px */
  .dash-config {
    padding: 6px 8px !important;
    gap: 5px !important;
  }
  .dash-config-row-top {
    gap: 4px !important;
  }
  .dash-config-banca-col {
    flex: 1.1 !important;
  }
  .dash-config-switch-col {
    flex: 0.9 !important;
  }
  .dash-config-label {
    margin-left: 0 !important;
    font-size: 8.5px !important;
  }
  .dash-banca-filtro-btn {
    padding: 1px 4px !important;
    font-size: 7.5px !important;
  }
  .dash-banca-box {
    min-height: 28px !important;
    padding: 2px 4px !important;
  }
  .dash-banca-valor {
    font-size: 11px !important;
  }
  .dash-switch-container {
    margin-left: 0 !important;
    height: 28px !important;
    gap: 4px !important;
  }
  .dash-switch-toggle {
    width: 30px !important;
    height: 16px !important;
  }
  .dash-switch-slider:before {
    height: 10px !important;
    width: 10px !important;
    left: 2px !important;
    bottom: 2px !important;
  }
  .dash-switch-toggle input:checked + .dash-switch-slider:before {
    transform: translateX(14px) !important;
  }
  .dash-switch-badge {
    font-size: 8.5px !important;
  }
  .dash-config-group {
    gap: 2px !important;
  }
  .dash-config-group label {
    font-size: 8.5px !important;
  }
  .dash-config-group select,
  .dash-config-group input {
    padding: 4px 6px !important;
    font-size: 10.5px !important;
  }
  .dash-config-total {
    padding-top: 4px !important;
    margin-top: auto !important;
  }
  .dash-config-total-label {
    font-size: 8px !important;
  }
  .dash-config-total-valor {
    font-size: 15px !important;
    margin-top: 1px !important;
  }

  /* Partidas (Card Extra) na Coluna 3 */
  .dash-card-extra {
    padding: 6px 8px !important;
  }
  .dash-extra-header {
    padding: 3px 6px !important;
    margin-bottom: 4px !important;
  }
  .dash-extra-title {
    font-size: 9.5px !important;
  }
  .dash-extra-limpar-btn {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
    right: 4px !important;
  }
  .dash-item-partida {
    padding: 5px 6px !important;
    gap: 2px !important;
  }
  .dash-item-partida-top {
    font-size: 9px !important;
    min-height: 14px !important;
  }
  .dash-item-partida-liga {
    font-size: 9px !important;
    max-width: calc(100% - 55px) !important;
  }
  .dash-item-partida-gols-tag {
    font-size: 8px !important;
    padding: 1px 3px !important;
  }
  .dash-item-partida-mid {
    font-size: 9.5px !important;
    gap: 4px !important;
  }
  .dash-item-partida-times {
    font-size: 9.5px !important;
  }

  /* Linha Inferior: Gráfico de Linha e Calendário */
  .dash-grafico-linha {
    padding: 6px 8px !important;
  }
  .dash-grafico-header {
    min-height: 20px !important;
    margin-bottom: 2px !important;
    padding-bottom: 2px !important;
  }
  .dash-grafico-titulo-wrap .dash-section-title {
    font-size: 10px !important;
  }
  .dash-color-swatch {
    width: 10px !important;
    height: 10px !important;
  }
  .dash-cal-weekdays {
    gap: 2px !important;
    font-size: 7.5px !important;
  }
  .dash-cal-grid {
    gap: 2px !important;
  }
  .dash-cal-day {
    padding: 2px 1px !important;
    min-height: 28px !important;
    gap: 1px !important;
  }
  .dash-cal-day-valor {
    font-size: 9.5px !important;
    margin: 0 !important;
  }
  .dash-cal-day-num,
  .dash-cal-day-ops {
    font-size: 7.5px !important;
  }
  .dash-cal-footer {
    padding-top: 2px !important;
    font-size: 8.5px !important;
  }

  /* Painel de Menu / Configurações no breakpoint 769px a 1000px */
  .championship-panel {
    position: fixed !important;
    top: 92px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(460px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 104px) !important;
    max-height: calc(100dvh - 104px) !important;
    z-index: 200 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
  }
}


/* =====================================================================
   3. CELULAR / MOBILE (max-width: 768px)
   ===================================================================== */
@media (max-width: 768px) {
  /* Faixa Superior Mobile: Grid de 2 linhas
     Linha 1: [GolScanner] [Bloco 1] -- [Bloco 3] -- [Menu ☰]
     Linha 2: [Bloco 2 (100% de largura com 5 botões distribuídos)] */
  .topbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 50px auto auto !important;
    grid-template-areas:
      "switch logo  menu"
      "block1 block1 block3 "
      "block2 block2 block2 " !important;
    align-items: center !important;
    row-gap: 10px !important;
    column-gap: 5px !important;
    height: auto !important;
    min-height: auto !important;
    padding: 6px 8px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: radial-gradient(
      circle at 50% 30%,
      rgb(12, 7, 75) 0%,
      rgb(10, 6, 66) 35%,
      rgb(3, 2, 20) 75%,
      #000000 100%
    ) !important;
  }

  .topbar-nav-row,
  .topbar-center,
  .topbar-right,
  .topbar-actions-right {
    display: contents !important;
  }

  /* Switch CARDS / MINI na esquerda da linha 1 com a mesma altura do botão menu */
  .feed-view-mode-switch {
    grid-area: switch !important;
    justify-self: start !important;
    align-self: center !important;
    display: inline-flex !important;
    height: 26px !important;
    padding: 2px !important;
    border-radius: 6px !important;
    background: var(--bg-hover) !important;
    border: 1px solid rgb(255, 255, 255, 0.3) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    gap: 2px !important;
    z-index: 2 !important;
  }

  .feed-view-mode-switch .feed-view-btn[data-feed-mode="off"] {
    display: none !important;
  }

  .feed-view-mode-switch .feed-view-btn {
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }

  .logo {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: center !important;
    font-size: 30px !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    order: unset !important;
    flex-shrink: 0 !important;
  }

  /* Botão Som / Mute: ao lado esquerdo do menu, bem próximo */
  #btn-toggle-som {
    grid-area: menu !important;
    justify-self: end !important;
    align-self: center !important;
    font-size: 13px !important;
    padding: 0 6px !important;
    height: 26px !important;
    border-radius: 6px !important;
    border: 1px solid rgb(255, 255, 255, 0.3);
    margin-right: 65px;
    white-space: nowrap !important;
    /* z-index: 2 !important; */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Botão Menu: totalmente à direita */
  #btn-menu-campeonatos {
    grid-area: menu !important;
    justify-self: end !important;
    align-self: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 0 8px !important;
    height: 26px !important;
    border-radius: 6px !important;
    border: 1px solid rgb(255, 255, 255, 0.3);
    margin: 0 !important;
    white-space: nowrap !important;
    order: unset !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Bloco 1: à esquerda, ao lado do logo */
  .topbar-block-1 {
    grid-area: block1 !important;
    justify-self: start !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px 4px !important;
    margin-left: 10px;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    background: rgba(72, 64, 78, 0.35) !important;
    border: 1px solid rgb(85, 80, 105) !important;
    border-radius: 6px !important;
  }

  /* Bloco 3: entre o logo e o menu */
  .topbar-block-3 {
    grid-area: block3 !important;
    justify-self: center !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px 4px !important;

    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background: rgba(72, 64, 78, 0.35) !important;
    border: 1px solid rgb(85, 80, 105) !important;
    border-radius: 6px !important;
  }

  .topbar-block-3 .filter-pill {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Bloco 2: na segunda linha distribuído em 100% dela */
  .topbar-block-2 {
    grid-area: block2 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    margin: 0 !important;
    align-items: center !important;
    background: rgba(72, 64, 78, 0.35) !important;
    border: 1px solid rgb(85, 80, 105) !important;
    border-radius: 6px !important;
  }

  .topbar-block-2 .filter-pill {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 5px 2px !important;
    font-size: clamp(6.5px, 2.2vw, 9px) !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: -0.2px !important;
  }

  /* Todos os botões da topbar com borda border-color: rgb(255, 255, 255, 0.3) no mobile quando inativos */
  .topbar
    button:not(.active):not(:hover):not(:active):not(.tem-fav-perd):not(
      .mutado
    ),
  .topbar .filter-pill:not(.active):not(:hover):not(:active):not(.tem-fav-perd),
  .topbar-block-1
    .filter-pill:not(.active):not(:hover):not(:active):not(.tem-fav-perd),
  .topbar-block-2
    .filter-pill:not(.active):not(:hover):not(:active):not(.tem-fav-perd),
  .topbar-block-3
    .filter-pill:not(.active):not(:hover):not(:active):not(.tem-fav-perd),
  #btn-menu-campeonatos:not(.active):not(:hover):not(:active),
  #btn-toggle-som:not(:hover):not(.mutado) {
    border-color: rgb(255, 255, 255, 0.3) !important;
  }

  /* Quando o botão estiver ativo ou em hover no mobile, quem manda é a borda do ativo ou hover */
  .topbar-block-1 .filter-pill:hover,
  .topbar-block-1 .filter-pill.active {
    border-color: var(--border-accent) !important;
  }
  .filter-pill.ht:hover,
  .filter-pill.ht.active {
    border-color: rgba(239, 68, 68, 0.35) !important;
  }
  .topbar-block-1 .filter-pill[data-filter="fila"]:hover,
  .topbar-block-1 .filter-pill[data-filter="fila"].active {
    border-color: var(--cyan) !important;
  }
  .topbar-block-1 .filter-pill[data-filter="favoritos"]:hover,
  .topbar-block-1 .filter-pill[data-filter="favoritos"].active {
    border-color: rgba(245, 158, 11, 0.7) !important;
  }

  .topbar-block-2 .filter-pill:hover,
  .topbar-block-2 .filter-pill.active {
    border-color: rgba(59, 130, 246, 0.75) !important;
  }
  .topbar-block-2 .filter-pill.tem-fav-perd {
    border-color: var(--blue) !important;
  }

  .topbar-block-3 .filter-pill:hover,
  .topbar-block-3 .filter-pill.active {
    border-color: rgba(245, 158, 11, 0.75) !important;
  }
  .topbar-block-3 .filter-pill.tem-fav-perd {
    border-color: var(--amber) !important;
  }

  #btn-menu-campeonatos:hover,
  #btn-menu-campeonatos.active {
    border-color: rgba(6, 182, 212, 0.6) !important;
  }

  #btn-toggle-som:hover {
    border-color: rgba(255, 255, 255, 0.6) !important;
  }
  #btn-toggle-som.mutado {
    border-color: rgba(239, 68, 68, 0.5) !important;
  }
  #btn-toggle-som.mutado:hover {
    border-color: rgba(239, 68, 68, 0.8) !important;
  }

  .feed-view-btn[data-feed-mode="cards"].active,
  .feed-view-btn[data-feed-mode="cards"]:hover {
    border-color: rgba(6, 182, 212, 0.6) !important;
  }
  .feed-view-btn[data-feed-mode="mini"].active,
  .feed-view-btn[data-feed-mode="mini"]:hover {
    border-color: rgba(245, 158, 11, 0.6) !important;
  }

  /* Filtros Custom (CUSTOM 1 e CUSTOM 2): sem border-radius */
  .topbar-block-2 .filter-pill[data-filter="gols"],
  .topbar-block-2 .filter-pill[data-filter="ht_zero_zero"] {
    color: white !important;
    background-color: rgb(17, 3, 39);
  }

  .topbar-block-2 .filter-pill .pill-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .topbar-block-1 .filter-pill,
  .topbar-block-3 .filter-pill {
    padding: 4px 5px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    text-align: center !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  .topbar-block-3 .filter-pill {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .topbar-block-1 .contador-feed {
    font-size: 8px !important;
    min-width: auto !important;
    height: auto !important;
    margin-left: 2px !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
  }

  /* Oculta controles e áreas exclusivas de desktop no celular */
  .view-mode-switch,
  .side-panel,
  .filter-bar,
  #dashboard-view {
    display: none !important;
  }

  /* Layout principal do Feed no celular */
  .layout {
    display: block !important;
    width: 100% !important;
    padding: 10px 8px 30px !important;
    margin: 0 !important;
  }

  .main-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #lista-jogos {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Card completo de jogo ocupando 100% da largura, 1 acima do outro */
  .suggestion-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 10px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* Barra com botões nos cantos no topo do card no mobile */
  .suggestion-card-topbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 2px !important;
    min-height: 28px !important;
    box-sizing: border-box !important;
  }

  /* Oculta os botões do compactcard tradicional no mobile (popup/minimizar) */
  .suggestion-card-btn[data-role="compactar-toggle"],
  .suggestion-card-btn[data-role="fechar-compact"],
  .suggestion-card-btn[data-role="abrir-popup-fechar"] {
    display: none !important;
  }

  /* Botões X e Favorito um em cada canto e do mesmo tamanho (28x28px) no celular */
  .card-btn-delete,
  .suggestion-card-btn.card-btn-favorito {
    position: static !important;
    transform: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    font-size: 15px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .suggestion-card-topbar .card-btn-favorito {
    margin-right: auto !important;
    margin-left: 0 !important;
    z-index: 2 !important;
  }

  .suggestion-card-topbar .card-btn-delete {
    margin-left: auto !important;
    margin-right: 0 !important;
    z-index: 2 !important;
  }

  /* No modo normal (CARDS), força exibição expandida completa dos cards */
  body:not(.modo-cards-mini) .suggestion-card.compacto .match-score-display,
  body:not(.modo-cards-mini) .suggestion-card.compacto .sug-footer {
    display: block !important;
  }

  body:not(.modo-cards-mini) .suggestion-card.compacto .intensity-chart {
    display: block !important;
  }

  body:not(.modo-cards-mini) .suggestion-card.compacto .compact-info-badge,
  body:not(.modo-cards-mini) .suggestion-card.compacto .compact-status-badges,
  body:not(.modo-cards-mini) .suggestion-card.compacto .compact-filtro-tag {
    display: none !important;
  }

  /* No modo MINI (compacto) no celular: botões Fav e Excluir um em cada canto para não cobrir o nome da liga */
  body.modo-cards-mini .suggestion-card-topbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 2px !important;
    min-height: 28px !important;
  }

  body.modo-cards-mini .suggestion-card-topbar .compact-card-league {
    display: inline-flex !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: calc(100% - 72px) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  body.modo-cards-mini .suggestion-card-topbar .card-btn-favorito {
    position: static !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    z-index: 2 !important;
  }

  body.modo-cards-mini .suggestion-card-topbar .card-btn-delete {
    position: static !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    z-index: 2 !important;
  }

  /* Borda principal de todos os cards no mobile (compactos e normais não favoritados) */
  .suggestion-card:not(.fila),
  .match-card:not(.fila) {
    border-color: rgb(255, 255, 255, 0.3) !important;
  }

  /* Quando o card estiver favoritado (fav ativo), quem manda é a borda amber clássica de favorito */
  .suggestion-card.favorite:not(.fila),
  .suggestion-card.favoritado:not(.fila),
  .suggestion-card.is-favorito:not(.fila),
  .match-card.favorite:not(.fila) {
    border-color: rgba(245, 158, 11, 0.75) !important;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.25) !important;
  }

  .suggestion-card.favorite:not(.fila):hover,
  .suggestion-card.favoritado:not(.fila):hover,
  .suggestion-card.is-favorito:not(.fila):hover,
  .match-card.favorite:not(.fila):hover {
    border-color: rgba(245, 158, 11, 0.9) !important;
  }

  .suggestion-card:has(.card-btn-favorito.ativo):not(.fila),
  .match-card:has(.act-btn[data-role="favorito"].active):not(.fila) {
    border-color: rgba(245, 158, 11, 0.75) !important;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.25) !important;
  }

  .suggestion-card:has(.card-btn-favorito.ativo):not(.fila):hover,
  .match-card:has(.act-btn[data-role="favorito"].active):not(.fila):hover {
    border-color: rgba(245, 158, 11, 0.9) !important;
  }

  /* Borda do display de placar e badges do card no mobile */
  .match-score-display {
    border: 1px solid rgb(255, 255, 255, 0.3) !important;
  }

  /* Borda dos badges do display (dando prioridade para a cor acesa quando tiver) */
  .match-score-display
    .sug-stat:not(.pre-live-ativo):not(.hot-ativo):not(.exg-ativo):not(
      .liga-ativo
    ),
  .match-score-display .mini-odd-box,
  .compact-status-badge:not(.ativo) {
    border-color: rgb(255, 255, 255, 0.3) !important;
  }

  /* Borda dos botões de Favorito e Excluir na parte de cima do card no mobile */
  .suggestion-card .card-btn-delete:not(.restaurar),
  .suggestion-card .card-btn-favorito:not(.ativo),
  .suggestion-card-btn.card-btn-favorito:not(.ativo) {
    border: 1px solid rgb(255, 255, 255, 0.3) !important;
  }

  /* Menu lateral de campeonatos adaptado para mobile overlay */
  .championship-panel {
    position: fixed !important;
    top: 96px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(440px, calc(100vw - 16px)) !important;
    max-height: calc(100vh - 110px) !important;
    z-index: 200 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
  }
}

@media (max-width: 420px) {
  .topbar-block-2 {
    gap: 3px !important;
    padding: 3px 4px !important;
  }
  .topbar-block-2 .filter-pill {
    padding: 4px 1px !important;
    font-size: clamp(6.2px, 2.1vw, 8px) !important;
    letter-spacing: -0.3px !important;
  }
}

@media (max-width: 360px) {
  .logo {
    font-size: 16px !important;
  }
  .topbar-block-1 .filter-pill,
  .topbar-block-3 .filter-pill {
    font-size: 8px !important;
    padding: 3px 2px !important;
  }
  .topbar-block-2 {
    gap: 2px !important;
    padding: 2px 3px !important;
  }
  .topbar-block-2 .filter-pill {
    font-size: clamp(5.8px, 1.9vw, 7.2px) !important;
    padding: 3px 1px !important;
    letter-spacing: -0.4px !important;
  }
  #btn-menu-campeonatos {
    font-size: 9.5px !important;
    padding: 4px 6px !important;
  }
  #btn-toggle-som {
    font-size: 11px !important;
    padding: 4px 7px !important;
  }
}

/* =====================================================================
   4. DISPOSITIVOS COM POUCO EIXO Y (CELULAR DEITADO / LANDSCAPE / ALTURA <= 620PX - APENAS < 1000px)
   Garante que os menus (Sons, Feed, Ligas, Estratégias) não cortem no eixo Y
   ===================================================================== */
@media (max-width: 999px) and (max-height: 620px), (max-width: 999px) and (orientation: landscape) and (max-height: 520px) {
  .championship-panel {
    top: 6px !important;
    bottom: 6px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(540px, calc(100vw - 16px)) !important;
    max-height: calc(100vh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    height: auto !important;
    z-index: 300 !important;
    border-radius: 10px !important;
  }

  /* Compactar as barras de abas e cabeçalhos para maximizar área útil vertical */
  .menu-tabs-bar {
    padding: 3px 10px 0 10px !important;
    flex-shrink: 0 !important;
  }

  .menu-tab-btn {
    padding: 5px 8px !important;
    font-size: 10px !important;
  }

  .championship-close {
    width: 22px !important;
    height: 22px !important;
    font-size: 15px !important;
  }

  .config-subtabs-bar {
    padding: 4px 10px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .config-subtab-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  /* Ligas: cabeçalho e busca mais compactos */
  .championship-panel-header {
    padding: 5px 10px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  .championship-header-row h2 {
    font-size: 11.5px !important;
  }

  .championship-header-subtitle {
    display: none !important; /* Oculta subtítulo secundário para poupar altura */
  }

  .championship-clear {
    padding: 2px 6px !important;
    font-size: 9.5px !important;
  }

  .championship-search-box {
    margin: 0 8px 4px 8px !important;
    flex-shrink: 0 !important;
  }

  .championship-search-input {
    padding: 5px 26px 5px 8px !important;
    font-size: 11px !important;
  }

  .championship-list {
    max-height: calc(100vh - 165px) !important;
    max-height: calc(100dvh - 165px) !important;
    overflow-y: auto !important;
    padding: 4px 8px 16px 8px !important;
    gap: 1px !important;
  }

  .championship-option {
    min-height: 28px !important;
    padding: 3px 6px !important;
    font-size: 11px !important;
  }

  /* Feed: cabeçalho e cards mais compactos */
  .feed-header-centered {
    padding: 5px 10px !important;
    flex-shrink: 0 !important;
  }

  .feed-header-centered h2 {
    font-size: 11px !important;
  }

  .feed-config-body {
    max-height: calc(100vh - 150px) !important;
    max-height: calc(100dvh - 150px) !important;
    overflow-y: auto !important;
    padding: 8px 12px !important;
    gap: 10px !important;
  }

  .feed-config-group {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  /* Sons: cabeçalho e cards de som mais compactos */
  .sons-header-centered {
    padding: 5px 10px !important;
    flex-shrink: 0 !important;
  }

  .sons-header-title {
    font-size: 10.5px !important;
  }

  .sons-config-body {
    max-height: calc(100vh - 140px) !important;
    max-height: calc(100dvh - 140px) !important;
    overflow-y: auto !important;
    padding: 8px 12px !important;
    gap: 6px !important;
  }


  .sons-alert-list {
    gap: 6px !important;
  }

  .sons-alert-card {
    padding: 6px 10px !important;
    gap: 10px !important;
  }

  .sons-alert-name {
    font-size: 11px !important;
  }

  .sons-alert-desc {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .sons-switch-item {
    padding: 2px 6px !important;
  }

  /* Estratégias */
  .estrategias-nav-bar {
    padding: 4px 10px !important;
    flex-shrink: 0 !important;
  }

  .estrategia-nav-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
}

/* =====================================================================
   PAINEL DE MENU EM TELAS ACIMA DE 1000px (DESKTOP): CANTO DIREITO E TAMANHO PADRÃO
   ===================================================================== */
@media (min-width: 1000px) {
  .championship-panel {
    position: fixed !important;
    top: 68px !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(390px, calc(100vw - 32px)) !important;
    max-height: min(640px, calc(100vh - 84px)) !important;
    z-index: 110 !important;
  }
}

@media (min-width: 1000px) and (max-height: 620px) {
  .championship-panel {
    top: 68px !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(390px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 76px) !important;
    max-height: calc(100dvh - 76px) !important;
  }
}