html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 3%;
  width: 100%;
  height: 100%;
  opacity: 8;
  overflow: auto;
  backdrop-filter: blur(8px);
  background-color: rgba(0, 0, 0, 0.4);
}

#modalText {
  color: #00d300;
  padding: 50px;
  font-size: 20px;
  font-family: "Press Start 2P", cursive;
}

.modal-content {
  text-align: center;
  background-color: #000;
  margin: 15% auto;
  border: #00d300 2px solid;
  box-shadow: 2px 2px 2px #00d300;
  border-radius: 10px;
  width: 50%;
  height: 30%;
  position: relative;
  z-index: 100000;
}

/* 🔧 REMOVIDO: Botão close escondido */
.close {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media screen and (max-width: 768px){
  .modal-content{
    margin: 50% auto;
    width: auto;
  }

  #modalText {
    font-size: 25px;
    line-height: 2;
    padding: 30px;
  }
}

/* 🔧 ADICIONADO: Estilos para melhor visualização do modal */
.modal-content {
  /* Animação de entrada */
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 🔧 ADICIONADO: Garantir que o modal apareça corretamente quando ativo */
.modal.active {
  display: block !important;
}

/* 🔧 ADICIONADO: Efeito de brilho para destacar o modal */
.modal-content {
  box-shadow: 
    0 0 20px #00d300,
    2px 2px 2px #00d300,
    inset 0 0 20px rgba(0, 211, 0, 0.1);
}

/* 🔧 ADICIONADO: Garantir que o texto seja sempre visível */
#modalText {
  position: relative;
  z-index: 100002;
  text-shadow: 
    0 0 10px #00d300,
    2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* 🔧 ADICIONADO: Indicador visual de tempo restante */
.modal-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #00d300, #00ff41);
  border-radius: 0 0 8px 8px;
  animation: countdown 7s linear;
  z-index: 100003;
}

/* 🔧 ADICIONADO: Animação de countdown visual */
@keyframes countdown {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* 🔧 ADICIONADO: Aplicar countdown apenas quando é fim de jogo */
.modal.game-end .modal-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #00d300, #00ff41);
  border-radius: 0 0 8px 8px;
  animation: gameEndCountdown 7s linear;
  z-index: 100003;
  box-shadow: 0 0 10px #00d300;
}

/* 🔧 ADICIONADO: Animação específica para fim de jogo */
@keyframes gameEndCountdown {
  from {
    width: 100%;
    background: linear-gradient(90deg, #00d300, #00ff41);
  }
  50% {
    background: linear-gradient(90deg, #ffff00, #00ff41);
  }
  80% {
    background: linear-gradient(90deg, #ff8800, #ffff00);
  }
  100% {
    width: 0%;
    background: linear-gradient(90deg, #ff0000, #ff8800);
  }
}

/* 🔧 ADICIONADO: Estilos específicos para modal de fim de jogo */
.modal.game-end {
    pointer-events: auto !important;
}

.modal.game-end .modal-content {
    border-color: #00ff41;
    box-shadow: 
        0 0 30px #00ff41,
        2px 2px 2px #00ff41,
        inset 0 0 30px rgba(0, 255, 65, 0.2);
    animation: gameEndPulse 2s ease-in-out infinite alternate;
}

@keyframes gameEndPulse {
    0% {
        box-shadow: 
            0 0 30px #00ff41,
            2px 2px 2px #00ff41,
            inset 0 0 30px rgba(0, 255, 65, 0.2);
    }
    100% {
        box-shadow: 
            0 0 50px #00ff41,
            2px 2px 2px #00ff41,
            inset 0 0 50px rgba(0, 255, 65, 0.3);
    }
}

/* 🔧 ADICIONADO: Texto do modal de fim de jogo */
.modal.game-end #modalText {
    white-space: pre-line;
    line-height: 1.5;
}

/* 🔧 ADICIONADO: Responsividade melhorada */
@media screen and (max-width: 768px) {
    .modal.game-end #modalText {
        font-size: 20px;
        padding: 40px 20px;
        line-height: 1.8;
    }
    
    .modal.game-end .modal-content::after {
        height: 6px;
    }
}

@media screen and (max-width: 480px) {
    .modal.game-end #modalText {
        font-size: 16px;
        padding: 30px 15px;
        line-height: 2;
    }
    
    .modal.game-end .modal-content::after {
        height: 8px;
    }
}