:root {
      /* Tema escuro */
      --simulagrid: linear-gradient(180deg, #ff6833, #ff6833);
      --btn1: 2px solid #ff6833;
      --btn2: #FFFFFF;
      --bg: #0f1115;
      --panel: #161a22;
      --ink: #e8eef6;
      --muted: #9fb0c8;
      --accent: #ffffff;
      --accent-2: #ff6833;
      --danger: #fb7185;
      --warn: #fbbf24;
      --ok: #34d399;
      --chip: #1a2130;
      --border: #232a35;
      --lotomania-purple: #6b46c1;
      --lotomania-light: #FFFFFF;
      --glass: rgba(255, 255, 255, 0.02);
      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
      
      /* Ajuste de cores para tema escuro */
      --hit-20: #0b6d3b; /* Verde */
      --hit-19: #f28122; /* Laranja */
      --hit-16-18: #b0a61f; /* Amarelo */
      
      /* Cores para destaque de números atrasados no tema escuro */
      --delay-3: #ffeb3b; /* Amarelo */
      --delay-4: #ff9800; /* Laranja */
      --delay-5: #4caf50; /* Verde */
      
      /* Cores para mapa de calor */
      --heatmap-green: #4caf50;
      --heatmap-yellow: #ffeb3b;
      --heatmap-red: #f44336;
    }

    .dark-mode {
      /* Tema claro (padrão) */
      --simulagrid: linear-gradient(180deg, #bd07bd, #bd07bd);
      --btn1: 2px solid #bd07bd;
      --btn2: #bd07bd;
      --bg: #f8fafc;
      --panel: #ffffff;
      --ink: #1e293b;
      --muted: #64748b;
      --accent: #6b46c1;
      --accent-2: #bd07bd;
      --danger: #ef4444;
      --warn: #f59e0b;
      --ok: #10b981;
      --chip: #f1f5f9;
      --border: #e2e8f0;
      --glass: rgba(0, 0, 0, 0.05);
      --lotomania-purple: #6b46c1;
      --lotomania-light: #0066b3;
      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      
      /* Novas cores para destaque de acertos */
      --hit-20: #0b6d3b; /* Verde */
      --hit-19: #f28122; /* Laranja */
      --hit-16-18: #b0a61f; /* Amarelo */
      
      /* Cores para destaque de números atrasados */
      --delay-3: #ffeb3b; /* Amarelo */
      --delay-4: #ff9800; /* Laranja */
      --delay-5: #4caf50; /* Verde */
      
      /* Cores para mapa de calor */
      --heatmap-green: #4caf50;
      --heatmap-yellow: #ffeb3b;
      --heatmap-red: #f44336;
    }

    /* Estilo para o link de estatísticas */
    .stats-link {
        color: var(--lotomania-light);
        text-decoration: none;
        font-size: 12px;
    }

    .stats-link:hover {
        text-decoration: underline;
    }
    
    
      /* Menu Hamburguer */
  .hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
  }

  .hamburger-line {
    width: 25px;
    height: 3px;
    background-color: var(--ink);
    margin: 3px 0;
    transition: 0.3s;
  }

  .mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--panel);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow);
    z-index: 1000;
    flex-direction: column;
  }

  .mobile-menu.active {
    display: flex;
  }

  .mobile-menu-btn {
    width: 100%;
    padding: 15px 20px;
    border: none;
    background: transparent;
    color: var(--ink);
    text-align: left;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 16px;
  }

  .mobile-menu-btn:hover {
    background: var(--chip);
  }
    

/* Breadcrumb Navigation */
.breadcrumb-nav {
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #666;
}

.breadcrumb-nav ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-nav li:not(:last-child)::after {
    content: '>';
    margin: 0 0.5rem;
    color: var(--border-color);
}

.breadcrumb-nav a {
    color: var(--secondary-color);
    text-decoration: none;
}

.breadcrumb-nav a:hover {
    text-decoration: underline;
}

.breadcrumb-nav span {
    font-weight: bold;
    color: var(--text-color);
}

    /* Estilo para números sorteados no modal */
    .modal-drawn {
        background: var(--simulagrid);
        color: white;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin: 2px;
    }
    
    .large-text {
      font-size: 110%;
    }
    
    .verylarge-text {
      font-size: 125%;
    }

    .large-text .small {
      font-size: 13px;
      margin: 4px;
    }

    * {
      box-sizing: border-box;
      transition: background-color 0.3s, color 0.3s;
    }

    html, body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background-color: var(--bg);
      color: var(--ink);
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      width: 100%;
      overflow-x: hidden;
      position: relative;
      box-sizing: border-box;
    }

    /* Adicione isso também para garantir que todos os elementos respeitem os limites */
    *, *::before, *::after {
      box-sizing: border-box;
    }

    /* Para prevenir scroll horizontal em mobile */
    .container {
      max-width: 100%;
      overflow-x: hidden;
    }

    #g_seed {
        cursor: not-allowed !important;
        pointer-events: none !important; /* Isso impede qualquer interação */
        user-select: none !important; /* Impede seleção de texto */
    }

    /* Se ainda estiver aparecendo o cursor de texto */
    #g_seed:disabled {
       
    }

    /* Estilos para a tabela de ciclos */
    .cycle-stats {
        text-align: center;
        width: 100%;
        margin: 0 auto;
        background: var(--panel);
        border-radius: 12px 12px 0 0;
        padding: 20px;
        margin-bottom: 0px;
        border: 1px solid var(--border);
    }

    .status-header h2 {
        margin: 0;
        padding: 15px 0;
        font-size: 1.5em;
        color: var(--ink);
        border-bottom: 2px solid #FFFFFF;
        font-family: 'Arial', sans-serif;
    }

    .stat-container {
        display: inline-flex;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }

    .stat-item {
        text-align: center;
        padding: 15px;
        background: var(--chip);
        border-radius: 8px;
        margin: 10px;
        min-width: 200px;
        max-width: 200px;
    }

    .stat-label {
        font-size: 16px;
        color: var(--muted);
        margin-bottom: 5px;
    }

    .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: 1px solid var(--border);
    }

    .cycle-table {
        width: 100%;
        border-collapse: collapse;
        background: var(--panel);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 0px;
    }

    .cycle-table a{
        color: 1px solid var(--border);
    }

    .cycle-table th, .cycle-table td {
        border: 1px solid var(--border);
        padding: 12px;
        text-align: center;
    }

    .cycle-table th {
        background: #073581;
        color: white;
    }

    .cycle-table tr:nth-child(even) {
        background: var(--chip);
    }

    .number-grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 4px;
        margin-top: 8px;
    }

    .number-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
        min-height: 25px;
    }

    .number-cell.not-drawn {
        background: #dc3545a8;
    }

    .number-cell.drawn {
        background: #198754cc;
    }

    .drawn-numbers-grid {
        display: inline-grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 4px;
    }

    .drawn-number {
        background: #ff6833;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: bold;
        font-size: 14px;
        color: #FFF;
        margin: 2px;
    }

    .load-more {
        display: block;
        width: 100%;
        padding: 12px 0;
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        background-color: #3a833c;
        border: none;
        border-radius: 0 0 12px 12px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .load-more:hover {
        background-color: #45a049;
    }

    .buttonCont {
        margin-top: 15px;
    }

    .cycle-stats-container {
      margin: 20px 0;
      padding: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .cycle-stats-container h3 {
      margin-top: 0;
      margin-bottom: 15px;
      color: var(--lotomania-light);
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      padding-bottom: 10px;
    }

    .cycle-stats-table {
      width: 100%;
      border-collapse: collapse;
      margin: 10px 0;
      font-size: 14px;
      max-width: 400px;
    }

    .cycle-stats-table th {
      background: #073581;
      color: white;
      padding: 10px;
      font-weight: 600;
      text-align: center;
    }

    .cycle-stats-table td {
     padding: 8px 12px;
        text-align: center;
        border: 1px solid var(--border);
    }

    .cycle-stats-table tr:last-child td {
      border-bottom: none;
    }

    .cycle-stats-table tr.common-cycle {
      background-color: #198754cc;
      color: #FFFFFF;
    }

    .cycle-stats-table tr.rare-cycle {
      background: #dc3545a8;
        color: #FFFFFF;
    }

    .cycle-stats-table tr.uncommon-cycle {
          background: #fd7e14c9;
        color: #FFFFFF;
    }

    /* Estilos para números atrasados */
    .delayed-number {
      border: 2px solid #dc3545 !important;
      position: relative;
    }

    .delayed-number::after {
      content: "⏱";
      position: absolute;
      top: -8px;
      right: -8px;
      font-size: 10px;
      background: #dc3545;
      color: white;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Garantir que imagens não ultrapassem os limites */
    img {
      max-width: 100%;
      height: auto;
    }
    
    #tblResultados {
      width: 100%;
      max-width: 100%;
      border-collapse: collapse;
      table-layout: auto; /* distribui as colunas automaticamente */
    }

    #tblResultados th,
    #tblResultados td {
      padding: 6px;
      text-align: center;
      white-space: nowrap; /* evita quebra de linha dentro das células */
    }

    #tblResultados a{
        color: inherit;
    }

    .table-wrapper {
      width: 100%;
      overflow-x: auto;  /* adiciona rolagem horizontal */
    }

    .corpodosite{
        display: flex; 
        justify-content:space-between; 
        gap:12px; 
        align-items:flex-start; 
        flex-wrap: wrap;
    }
    
    .corpodogrid {
        display:inline; 
        justify-content:center; 
        align-items:center; 
        gap:10px; 
        margin-top:10px;
    }
    .corpodogrid2 {
        display:flex; 
        justify-content:center; 
        align-items:center; 
        gap:10px; 
        margin-top:5px;
    }
    
    .grid-gerador{
        display:grid; 
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
        gap:10px; 
        margin-top:12px;   
    }
    
    select {
        background-color: grey; /* define o fundo do select */
        color: #fff;            /* cor do texto */
        border: 1px solid #ccc; /* borda */
        padding: 0.4em 0.6em;
        border-radius: 4px;
    }

    select option {
        background-color: white; /* fundo das opções */
        color: black;            /* cor do texto das opções */
    }

    .header-container {
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      padding: 0 18px;
    }
    
    .period-filter {
        margin-bottom: 15px;
    }

    header {
      padding: 15px 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo img {
      height: 40px;
      width: auto;
    }

    header h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.2px;
      color: var(--lotomania-light);
    }

    .accessibility-controls {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .accessibility-btn {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink);
      box-shadow: var(--shadow);
    }

    .ad-header {
      width: 100%;
   /*   background: var(--panel);
      border-radius: 8px; */
      padding: 10px;
      text-align: center;
      margin-top: 10px;
   /*   border: 1px solid var(--border);
      box-shadow: var(--shadow);*/
    }

    .container {
      max-width: 1200px;
      width: 100%;
      margin: 20px auto;
      padding: 0 18px;
      flex: 1;
    }

    /* Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .tab-btn {
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--panel);
      color: var(--ink);
      cursor: pointer;
      font-weight: 700;
      box-shadow: var(--shadow);
    }
    
    .tab-btn.active {
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
      border: var(--btn1);
      color: var(--btn2);
    }

    /* Panel */
    .panel {
      display: none;
      margin-top: 18px;
      padding: 18px;
      border-radius: 14px;
      background: var(--panel);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    .panel.active {
      display: block;
    }

    /* layout interno */
    .row {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .col {
      flex: 1;
      min-width: 0; /* Previne quebra de layout em telas pequenas */
    }

    textarea, pre {
      width: 100%;
      min-height: 120px;
      background: var(--chip);
      border: 1px solid var(--border);
      padding: 12px;
      border-radius: 10px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
      color: var(--ink);
      box-shadow: var(--shadow);
    }

    .grid100 {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 8px;
      margin-top: 12px;
    }

    .ball {
      background: var(--chip);
      text-align: center;
      border-radius: 10px;
      cursor: pointer;
      user-select: none;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    .ball.active {
      background: var(--simulagrid);
      color: #ffffff;
    }

    .ball.hit {
      background: linear-gradient(180deg, #c4b5fd, #a78bfa);
      color: var(--ink);
      box-shadow: 0 6px 18px rgba(139, 92, 246, 0.25);
    }

    .buttons {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .btn {
      background: var(--accent-2);
      color: white;
      padding: 8px 8px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      font-weight: 700;
      box-shadow: var(--shadow);
      white-space: nowrap;
    }

    .btn.secondary {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--ink);
    }

    .btn.warn {
      background: var(--warn);
      color: #2a0b00;
    }

    .btn.danger {
      background: var(--danger);
      color: white;
    }

    pre.code {
      font-size: 13px;
      max-height: 380px;
      overflow: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    th, td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      font-size: 13px;
    }

    th {
      color: var(--muted);
      font-weight: 700;
      font-size: 12px;
    }

    .pill {
        width: 25px;
        height: 25px;
        display: inline-flex;            /* flex container */
        align-items: center;      /* centraliza verticalmente */
        justify-content: center;  /* centraliza horizontalmente */
        border-radius: 999px;
        font-weight: 800;
        font-size: 12px;
    }

    .pill.h16 {
        background: #ff6833;
        color: #FFFFFF;
    }

    .pill.h17 {
        background: #ff6833;
    color: #FFFFFF;
    }

    .pill.h18 {
        background: #ff6833;
    color: #FFFFFF;
    }

    .pill.h19 {
        background: #ff6833;
    color: #FFFFFF;
    }

    .pill.h20 {
        background: #ff6833;
    color: #FFFFFF;
    }

    .dark-mode .pill.h16 {
        background: #ff6833;
        color: #FFFFFF;
    }

    .dark-mode .pill.h17 {
        background: #ff6833;
        color: #FFFFFF;
    }

    .dark-mode .pill.h18 {
        background: #ff6833;
        color: #FFFFFF;
    }

    .dark-mode .pill.h19 {
        background: #ff6833;
        color: #FFFFFF;
    }

    .dark-mode .pill.h20 {
        background: #ff6833;
        color: #FFFFFF;
    }

    .stat {
        background: var(--panel);
        border: 1px solid var(--border);
        padding: 12px;
        border-radius: 12px;
        box-shadow: var(--shadow);
        min-width: 100px;
    }

    .stat .kpi {
        font-size: 20px;
        font-weight: 800;
        min-width: 100px;
    }

    .muted {
        color: var(--muted);
    }

    .small {
        font-size: 14px;
        color: var(--muted);
        margin-bottom: 3px;
    }

    .chips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .chip {
        background: var(--chip);
        padding: 6px 10px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 13px;
        border: 1px solid var(--border);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .adsense {
     /*   background: var(--panel);
        border: 1px dashed var(--border);
        border-radius: 10px;  */
        padding: 12px;
        text-align: center;
        color: var(--muted);
        margin: 12px 0;
      /*  box-shadow: var(--shadow);  */
    }

    .ad-container {
        margin: 15px 0;
        width: 100%;
    }

    .ad-label {
        font-size: 10px;
        text-align: center;
        color: var(--muted);
        margin-bottom: 5px;
    }

    /* Mensagens de feedback */
    .feedback {
        padding: 10px 14px;
        border-radius: 8px;
        margin: 10px 0;
        display: none;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .feedback.error {
        background: rgba(239, 68, 68, 0.15);
        color: var(--danger);
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .feedback.success {
        background: rgba(16, 185, 129, 0.15);
        color: var(--ok);
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .feedback.info {
        background: rgba(139, 92, 246, 0.15);
        color: var(--accent);
        border: 1px solid rgba(139, 92, 246, 0.3);
    }

    /* Tabelas de estatísticas */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        margin: 15px 0;
    }
    
    /* Tabelas de estatísticas */
    .stats-grid2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin: 15px 0;
    }

    .stats-table {
        width: 100%;
        border-collapse: collapse;
        box-shadow: var(--shadow);
        border-radius: 8px;
        overflow: hidden;
    }

    .stats-table th, .stats-table td {
        padding: 8px 12px;
        text-align: center;
        border: 1px solid var(--border);
    }

    .stats-table th {
        background: #073581;
        color: #FFFFFF;
    }

    .stats-table .common {
        background: #198754cc; /* Verde suave, mas ainda vibrante */
        color: #FFFFFF;
    }

    .stats-table .uncommon {
        background: #fd7e14c9; /* Laranja queimado, destaca bem */
        color: #FFFFFF;
    }

    .stats-table .rare {
        background: #dc3545a8; /* Vermelho forte, mas não estourado */
        color: #FFFFFF;
    }

    /* Footer */
    footer {
        background: var(--panel);
        padding: 20px;
        margin-top: 40px;
        border-top: 1px solid var(--border);
        text-align: center;
        color: var(--muted);
        font-size: 12px;
        box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .footer-content {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    /* Tooltip para ajuda */
    .tooltip {
        position: relative;
        display: inline-block;
        cursor: help;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 150px;
        background-color: var(--ink);
        color: var(--bg);
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -140px;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 12px;
        box-shadow: var(--shadow);
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    /* Destaques para resultados com acertos específicos */
    .hit-20 {
        background-color: #05ffbe82; !important;
        border-left: 4px solid var(--hit-20) !important;
    }

    .hit-19 {
        background-color: #ff880582; !important;
        border-left: 4px solid var(--hit-19) !important;
    }

    .hit-16-18 {
        background-color: #ffed0082; !important;
        border-left: 4px solid var(--hit-16-18) !important;
    }

    /* Destaques para números atrasados */
    .delay-3 {
        background-color: var(--delay-3);
    }
    
    .delay-4 {
        background-color: var(--delay-4);
    }
    
    .delay-5 {
        background-color: var(--delay-5);
    }

    /* Estilo para botões de filtro ativos */
    .filter-btn-active[data-hits="20"] {
        background-color: var(--hit-20) !important;
        color: white !important;
        border-color: var(--hit-20) !important;
    }

    .filter-btn-active[data-hits="19"] {
        background-color: var(--hit-19) !important;
        color: white !important;
        border-color: var(--hit-19) !important;
    }

    .filter-btn-active[data-hits="16"],
    .filter-btn-active[data-hits="17"],
    .filter-btn-active[data-hits="18"] {
        background-color: var(--hit-16-18) !important;
        color: white !important;
        border-color: var(--hit-16-18) !important;
    }

    /* Estilo para a tabela de ciclos */
    .cycle-grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 4px;
        margin-top: 8px;
    }
    
    .cycle-number {
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 12px;
        font-weight: bold;
        background-color: white;
        border: 1px solid var(--border);
    }
    
    .cycle-number.drawn {
        background-color: #ff69b4; /* Rosa */
    }
    
    .cycle-completed {
        background-color: #d4edda;
        padding: 10px;
        border-radius: 8px;
        margin: 10px 0;
        text-align: center;
        font-weight: bold;
    }
    
    .heatmap-cell {
        padding: 5px;
        text-align: center;
        border-radius: 4px;
    }
    
    .heatmap-high {
        background-color: #198754cc; /* Verde */
        color: white;
    }
    
    .heatmap-medium {
        background-color: #fd7e14c9; /* Amarelo */
    }
    
    .heatmap-low {
        background-color: #dc3545a8; /* Vermelho */
        color: white;
    }
    
            .modal-stats {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        margin-bottom: 15px;
    }

    /* Responsividade */
    @media (max-width: 800px) {
        .desktop-ad {
            display: none;
        }
.ad-container {
    margin: 15px 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

 .number-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        margin-top: 8px;
    }

 .accessibility-controls {
      display: none !important;
    }

    .hamburger-menu {
      display: flex;
    }

    header {
      position: relative;
    }
 

  /* Animações do hamburger */
  .hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }

  .hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  .hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }
        
           .adsense {
     /*   background: var(--panel);
        border: 1px dashed var(--border); 
        border-radius: 10px; */
        padding: 12px;
        text-align: center;
      /*      color: var(--muted);
        margin: 12px 0;
        box-shadow: var(--shadow); */
width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow: visible;
    display: flex;
    justify-content: center;
    }
    
    .adsense ins {
    width: 100% !important;
    min-width: 100% !important;
}
    
        .ad-header {
      width: 100%;
      max-width: 100vw; /* garante que nunca ultrapasse a largura da tela */
    /*  background: var(--panel);
      border-radius: 8px; */ 
      padding: 0px;
      text-align: center;
      margin-top: 10px;
     /* border: 1px solid var(--border);
      box-shadow: var(--shadow); */ 
    }
        
                .modal-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 15px;
    }

        .stat-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center; /* Centraliza horizontalmente */
            gap: 0;
            margin: 0 auto; /* Centraliza o container */
        }

        .ball {
            background: var(--chip);
            text-align: center;
            border-radius: 100%;
            cursor: pointer;
            user-select: none;
            border: 1px solid var(--border);
       
            box-shadow: var(--shadow);
            display: flex;
            justify-content: center;  
            align-items: center;  
        }
        
        .corpodosite{
            display:block; 
        }
        
        .corpodogrid {
            display: grid;             /* Flexbox para alinhar horizontalmente */
            margin-top: 0;
        }

        .grid-gerador{
            display:grid; 
            grid-template-columns: repeat(2, minmax(100px, 1fr)); 
            gap:10px; 
            margin-top:12px;   
        }

        /* Filtro de período personalizado */
        .period-filter {
            margin-bottom: 15px;
        }

        .header-container {
            padding: 0 12px;
        }
        .container {
            padding: 0 12px;
        }
        header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
        
        .tabs {
            display: flex;           /* ativa flexbox */
            justify-content: center; /* centraliza horizontalmente */
            gap: 4px;                /* mantém o espaçamento entre os botões */
        }

        .tab-btn {
            padding: 8px 12px;
            font-size: 13px;
        }
        .grid100 {
            grid-template-columns: repeat(10, 1fr);
            display: inline-grid;
            padding: 18px;
            gap: 5px;
        }
        .stats-grid {
            grid-template-columns: 1fr;
        }
        .stats-grid2 {
            grid-template-columns: 1fr;
        }
        
        .ball{
                   width: 28px;
        height: 28px;
        font-size: 13px;
        }
        .chips{
            grid-template-columns: repeat(3, 1fr);
        }
        
        /* Ajustes para painel do simulador em mobile */
        #simulate > div {
            flex-direction: column;
        }
        
        #simulate aside {
            width: 100% !important;
            margin-top: 20px;
        }
    }

    @media (max-width: 600px) {
        .grid100 {
            grid-template-columns: repeat(10, 1fr);
        }
        .row {
            flex-direction: column;
            align-items: stretch;
        }
        .buttons {
            flex-wrap: wrap;
            justify-content: center;
        }
        
        /* Ajustes para tabelas em mobile */
        table {
            /* display: block; */
            overflow-x: auto;
        }
        
        /* Ajustes para inputs em formulários */
        .input {
            width: 100%;
        }
        
        /* Ajustes para estatísticas */
        .stat {
            min-width: unset;
            flex: 1;
        }
        
    }

    @media (max-width: 480px) {
  
        .logo h1 {
            font-size: 18px;
        }
        
        .accessibility-controls {
            width: 100%;
            justify-content: center;
            margin-top: 20px;
        }
        
        /* Ajustes para abas em mobile muito pequeno */
        .tab-btn {
            padding: 6px 10px;
            font-size: 12px;
        }
    }

    @media (min-width: 801px) {
        .mobile-ad {
            display: none;
        }
    }

    /* destaque de número acertado na célula do resultado */
    .hit-number {
        display: inline-block;
        padding: 3px 6px;
        border-radius: 6px;
        background: linear-gradient(180deg, #ddd6fe, #c4b5fd);
        color: var(--ink);
        margin-right: 4px;
        font-weight: 800;
    }

    .dark-mode .hit-number {
        background: #f78100;
        color: #FFFFFF;
    }

    .result-numbers {
        font-family: ui-monospace, monospace;
        font-size: 13px;
    }

    .generated-game {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        background: var(--chip);
        padding: 10px;
        border-radius: 10px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
    }

    .generated-left {
        flex: 1 1 60%;
    }

    .generated-right {
        flex: 0 0 200px;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .copy-small {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--muted);
        padding: 6px 8px;
        border-radius: 8px;
        cursor: pointer;
    }

    .copy-small:hover {
        color: var(--ink);
    }

    .game-stats {
        margin-top: 10px;
        font-size: 13px;
        color: var(--muted);
    }

    .help {
        font-size: 12px;
        color: var(--muted);
        margin-top: 6px;
    }

    .notice {
        background: var(--chip);
        padding: 10px;
        border-radius: 10px;
        border: 1px solid var(--border);
        color: var(--muted);
        box-shadow: var(--shadow);
    }

    input[type="number"], input[type="text"] {
        width: 100%;
        padding: 8px 12px;
        border-radius: 8px;
        background: var(--chip);
        border: 1px solid var(--border);
        color: var(--ink);
        margin-top: 4px;
        box-shadow: var(--shadow);
    }

    .input {
        margin-bottom: 10px;
        position: relative;
    }

    .input-help {
        position: absolute;
        right: 5px;
        top: 28px;
        color: var(--muted);
        cursor: help;
    }

    .hits-summary {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 15px 0;
    }

    .hit-item {
        background: var(--chip);
        padding: 10px;
        border-radius: 8px;
        text-align: center;
        min-width: 80px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
    }

    .hit-count {
        font-size: 18px;
        font-weight: 800;
        color: var(--accent);
    }

    .hit-label {
        font-size: 12px;
        color: var(--muted);
    }

    /* Modal para estatísticas do concurso */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        background-color: var(--panel);
        padding: 20px;
        border-radius: 12px;
        max-width: 500px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: var(--shadow);
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 10px;
    }

    .modal-title {
        font-weight: 800;
        color: var(--lotomania-light);
    }

    .close-modal {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: var(--muted);
    }



    .modal-stat {
        background: var(--chip);
        padding: 10px;
        border-radius: 8px;
        text-align: center;
        max-width: 100px;
    }

    .modal-stat-value {
        font-weight: 800;
        font-size: 18px;
    }

    .modal-stat-label {
        font-size: 12px;
        color: var(--muted);
    }

    .modal-numbers {
        margin: 15px 0;
    }

    .modal-section-title {
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--lotomania-light);
    }

    .modal-number-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 15px;
    }

    .modal-number {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: 700;
        font-size: 12px;
    }

    .modal-hit {
        background: #198754cc;
    }

    .modal-miss {
        background: #dc3545a8;
    }

    /* Filtro de período personalizado */
    .period-filter {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .period-input {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    /* Campo minimizado para colar jogo */
    .collapsible-textarea {
        margin-bottom: 10px;
    }

    .collapsible-header {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 8px;
        background: var(--chip);
        border-radius: 8px;
        border: 1px solid var(--border);
    }

    .collapsible-header:hover {
        background: var(--border);
    }

    .collapsible-icon {
        margin-right: 8px;
        transition: transform 0.3s;
    }

    .collapsible-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .collapsible-content.expanded {
        max-height: 200px;
    }