:root {
      /* Altura fixa da barra de anúncio na parte inferior do site */
      --adsense-height: 60px;
    }
    html, body {
      /* Remove margens e preenchimentos padrão, força altura 100% e impede overflow na tela */
      height: 100%;
      margin: 0;
      padding: 0;
      min-height: 100dvh;
      box-sizing: border-box;
      overflow: hidden;
	  max-width :500px;
		align-content: center;
		margin: 0 auto;
    background-color: #333;
    background-image: url("background.png");
    }
    body {
      /* Layout em coluna usando Flexbox:
         - main-content ocupa toda a área disponível acima da barra de anúncio
         - barra-adsense ocupa a base, nunca sobrepõe o conteúdo
      */
      display: flex;
      flex-direction: column;
      height: 100dvh;
      min-height: 100dvh;
      touch-action: pan-y; /* Evita zoom de pinça e double tap no mobile */
      padding-bottom: env(safe-area-inset-bottom); /* Reserva espaço extra para a área segura (notch/barras do iPhone) */
      box-sizing: border-box;
    }
    .main-content {
      /* Ocupa todo o espaço acima da barra de anúncio */
      flex: 1 0 auto;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: calc(100% - var(--adsense-height));
    }
    .metade {
      width: 100%;
    }
	  
	  
	  .bar-left {
  width: 6px; /* igual à largura da fatia left.png */
  height: 100%;
  background: url('left.png') no-repeat left center;
  background-size: cover;
  flex: 0 0 6px;
}

.bar-center {
  flex: 1 1 auto;
  height: 100%;
  background: url('center.png') repeat-x center center;
  background-size: auto 100%;
}

.bar-right {
  width: 6px; /* igual à largura da fatia right.png */
  height: 100%;
  background: url('right.png') no-repeat right center;
  background-size: cover;
  flex: 0 0 6px;
}
	  
	  
.bar-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  max-height: none;
  pointer-events: none;
  z-index: 2;
	margin-top: 2px;
}
	  img.bar-icon {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
}
	  
    .azul {
      background: #3d7cb7; /* Metade superior azul */
      height: 60%;
      position: relative; /* Para posicionar o mapa e o overlay */
      overflow: hidden; /* Garante que o mapa não vaze */
    }

    #mapaContainer {
      position: absolute;
      width: 100%; /* Ocupa 100% da largura do pai */
      height: 100%; /* Ocupa 100% da altura do pai */
      background-image: url('mapa.webp');
      background-size: auto; /* Exibe a imagem em seu tamanho original */
      background-position: center center; /* Centraliza a imagem */
      background-repeat: no-repeat; /* Impede a repetição da imagem */

      transition: background-position 1s ease-in-out; /* Transição suave para o movimento do mapa */
    }

    #initialMessageOverlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #3d7cb7; /* Cor de fundo azul */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10; /* Acima do mapa */
      transition: opacity 0.5s ease-in-out;
    }

    #initialMessageOverlay p {
      color: white;
      font-size: 1.5rem;
      text-align: center;
      padding: 20px;
      font-weight: bold;
      font-family: sans-serif; /* Sans-serif font */
    }
    .vermelho {
      background: #d30e00; /* Metade inferior vermelha */
      height: 40%;
      display: flex;
      align-items: center;
      justify-content: center; /* Centraliza os itens como um grupo */
      gap: 20px; /* Adiciona um espaço entre os itens */
      padding: 20px;
      box-sizing: border-box;
	  background-image: url("background_r.png");
	  background-size: cover;
      
    }

    #sortearBtn {
      /* Ajustes para o botão com ícone */
      width: 80px; /* Largura fixa */
      height: 80px; /* Altura fixa (igual ao campo de resultado) */
      background-color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: transform 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0; /* Remove padding para o ícone preencher */
    }

    #sortearBtn svg {
      width: 60px; /* Ajuste no tamanho do ícone */
      height: 60px;
    }

    #sortearBtn:active {
      transform: scale(0.95);
    }

    .botoes-container {
      display: flex;
      flex-direction: column;
      gap: 10px; /* Espaço entre o botão de sortear e o de reset */
    }

    #resetBtn {
      width: 80px; /* Mesma largura do botão de sortear */
      height: 40px;
      background-color: #e9412f;
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: transform 0.2s;
      font-weight: bold;
    }

    #resetBtn:active {
      transform: scale(0.95);
    }

    #ultimosSorteadosContainer {
      flex-grow: 1; /* Ocupa o espaço restante */
      display: flex;
      flex-direction: column;
      justify-content: flex-start; /* Alinha os itens ao topo */
      padding: 10px 0; /* Ajusta padding para os itens */
      box-sizing: border-box;
      overflow: hidden;
      font-family: sans-serif; /* Fonte sem serifa para a lista */
    }

    .resultado-item {
      text-align: center;
      font-weight: bold;
      color: #333;
      padding: 5px 0;
      white-space: normal;
      word-break: break-word;
      transition: all 0.3s ease-in-out; /* Transição suave para as mudanças */
    }

    .resultado-item.principal {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      font-size: 1.4rem; /* Diminui ainda mais o tamanho */
      opacity: 1;
      padding: 10px 15px; /* Ajusta padding para destaque */
      margin: 0 20px 5px 20px; /* Centraliza e adiciona margem inferior */
    }

    .resultado-item.secundario {
      font-size: 1.1rem; /* Tamanho igual ao 2. Rainbow Road */
      opacity: 0.6; /* Transparência similar ao 2. Rainbow Road */
      color: #eee; /* Cor mais clara para contraste com o fundo vermelho */
      padding: 2px 0; /* Diminui o espaçamento entre as linhas */
    }

    .resultado-item.terciario {
      font-size: 0.9rem; /* Menor que o secundário */
      opacity: 0.4; /* Mais transparente que o secundário */
      color: #eee; /* Cor mais clara para contraste com o fundo vermelho */
      padding: 2px 0; /* Diminui o espaçamento entre as linhas */
    }
    .barra-adsense {
      /* Barra de anúncio na base da tela, sempre visível,
         nunca cobre o conteúdo colorido.
         Integra com área segura do iPhone.
      */
      /*width: 100vw;*/
		cursor: pointer;
      background: #fff;
      /*box-shadow: 0 -2px 8px rgba(0,0,0,0.10);*/
      height: var(--adsense-height);
      min-height: var(--adsense-height);
      max-height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: env(safe-area-inset-bottom, 0);
      z-index: 1000;
      position: relative; /* NÃO é fixed, para não sobrepor nada */
      box-sizing: border-box;
    }
    /* 
      Modo paisagem (landscape) em celulares:
      Gira todo o site -90° para garantir que o conteúdo continue sempre em pé,
      simulando um app "travado" em retrato.
      Mantém layout perfeito após rotação.
    */
    @media screen and (orientation: landscape) and (max-width: 767px) {
      html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        position: absolute;
        top: 100%;
        left: 0;
        overflow: hidden;
      }
      body {
        height: 100vw !important;
        min-height: 100vw !important;
        width: 100vh !important;
        padding-bottom: env(safe-area-inset-left, 0);
      }
      .main-content {
        width: 100vh !important;
      }
      .barra-adsense {
        width: 100vh !important;
      }
    }
    /* 
      Impede seleção de texto para evitar zoom acidental ou seleção indesejada em touch
    */
    * {
      user-select: none;
      -webkit-user-select: none;
    }

    /* Estilos para o Modal */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: none; /* Inicia oculto */
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }

    .modal-content {
      background: white;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      max-width: 80%;
      font-family: sans-serif; /* Fonte sem serifa para todos os modais */
    }

    .modal-content p {
      margin: 0 0 20px 0;
      font-size: 1.2rem;
    }

    .modal-buttons button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1rem;
      margin: 0 10px;
    }

    #modalResetBtn, #modalResetConfirmBtn {
      background-color: #f44336;
      color: white;
    }

    #modalCancelBtn, #modalResetCancelBtn {
      background-color: #6c757d;
      color: white;
    }