/* Enigma SCP - CSS Responsivo */

/* Reset e isolamento para evitar conflitos */
.enigma-scp-container * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  
  .enigma-scp-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 40px;
    padding: 0 10px;
  }
  
  /* Container principal do jogo */
  .enigma-game-container {
    background-color: #1a202c;
    color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
  
  /* Títulos e subtítulos */
  .enigma-game-title {
    font-size: 1.75rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
    color: white;
  }
  
  .enigma-game-subtitle {
    text-align: center;
    color: #cbd5e0;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    padding: 0 10px;
  }
  
  /* Formulário e entrada */
  .enigma-form {
    margin-bottom: 1.5rem;
  }
  
  .enigma-form-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  
  .enigma-input {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem 1rem;
    background-color: #2d3748;
    border: 1px solid #4a5568;
    border-radius: 0.5rem;
    color: white;
    font-size: 1rem;
  }
  
  .enigma-input:focus {
    outline: none;
    border-color: #ecc94b;
    box-shadow: 0 0 0 3px rgba(236, 201, 75, 0.3);
  }
  
  .enigma-button {
    padding: 0.5rem 1rem;
    background-color: #d69e2e;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    min-width: 100px;
    flex-grow: 0;
  }
  
  .enigma-button:hover {
    background-color: #b7791f;
  }
  
  .enigma-button:disabled {
    background-color: #718096;
    cursor: not-allowed;
  }
  
  /* Mensagens de feedback */
  .enigma-message {
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    word-break: break-word;
  }
  
  .enigma-message-info {
    background-color: #2a4365;
    color: #ebf8ff;
  }
  
  .enigma-message-success {
    background-color: #22543d;
    color: #c6f6d5;
  }
  
  .enigma-message-error {
    background-color: #742a2a;
    color: #fed7d7;
  }
  
  /* Dica do dia */
  .enigma-hint-container {
    background-color: #2d3748;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
  }
  
  .enigma-hint-title {
    font-weight: bold;
    color: #ecc94b;
    margin-bottom: 0.5rem;
  }
  
  /* Tabela de tentativas - Versão Responsiva */
  .enigma-table-container {
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: 
      linear-gradient(to right, #1a202c 30%, rgba(26, 32, 44, 0)),
      linear-gradient(to right, rgba(26, 32, 44, 0), #1a202c 70%) 100% 0,
      linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 30%),
      linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 30%);
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, right 0, 0 0, 100% 0;
    background-attachment: local, local, scroll, scroll;
  }
  
  .enigma-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 650px;
  }
  
  .enigma-table-header {
    background-color: #0a1128 !important;
    position: sticky;
    top: 0;
    z-index: 10;
    font-weight: bolder;
  }
  
  .enigma-table-header th {
    padding: 0.75rem 0.5rem;
    background-color: #0e1838 !important;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.2;
    font-weight: bolder;
    vertical-align: middle;
    color: white;
    border: 1px solid #2d3748;
    white-space: normal;
    height: 60px;
  }
  
  .enigma-table-header th:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background-color: #0a1128;
    z-index: 20;
    width: 100px;
  }
  
  .enigma-table-row {
    border-top: 1px solid #4a5568;
  }
  
  .enigma-table-cell {
    padding: 0.75rem 0.5rem;
    text-align: center;
    border: 1px solid #2d3748;
    font-size: 0.9rem;
    vertical-align: middle;
    word-break: break-word;
  }
  
  .enigma-table-cell-left {
    padding: 0.75rem 0.5rem;
    text-align: left;
    position: sticky;
    left: 0;
    background-color: #1a202c;
    z-index: 5;
    width: 100px;
  }
  
  /* Células coloridas para resultado */
  .enigma-cell-correct {
    background-color: #2f855a;
    color: white;
  }
  
  .enigma-cell-partial {
    background-color: #d69e2e;
    color: black;
  }
  
  .enigma-cell-wrong {
    background-color: #c53030;
    color: white;
  }
  
  .enigma-cell-default {
    background-color: #4a5568;
    color: white;
  }
  
  /* Ícones de resultado */
  .enigma-icon-container {
    display: flex;
    align-items: center;
  }
  
  .enigma-icon-wrapper {
    margin-right: 0.5rem;
    flex-shrink: 0;
  }
  
  .enigma-icon-correct {
    color: #48bb78;
  }
  
  .enigma-icon-partial {
    color: #ecc94b;
  }
  
  .enigma-icon-wrong {
    color: #f56565;
  }
  
  /* Tentativas restantes */
  .enigma-attempts-remaining {
    color: #a0aec0;
    text-align: center;
    margin-bottom: 1.5rem;
  }
  
  /* Botão de compartilhamento */
  .enigma-share-button {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #3182ce;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  
  .enigma-share-button:hover {
    background-color: #2c5282;
  }
  
  /* Legenda */
  .enigma-legend-container {
    margin-top: 2rem;
    border-top: 1px solid #4a5568;
    padding-top: 1rem;
  }
  
  .enigma-legend-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  .enigma-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .enigma-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  
  .enigma-legend-color {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
  }
  
  .enigma-legend-color-correct {
    background-color: #2f855a;
  }
  
  .enigma-legend-color-partial {
    background-color: #d69e2e;
  }
  
  .enigma-legend-color-wrong {
    background-color: #c53030;
  }
  
  /* Loading state */
  .enigma-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16rem;
  }
  
  .enigma-loading-icon {
    color: #a0aec0;
    animation: spin 1.5s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Estilos responsivos para telas pequenas */
  @media (max-width: 480px) {
    .enigma-game-container {
      padding: 16px 12px;
    }
  
    .enigma-game-title {
      font-size: 1.5rem;
    }
  
    .enigma-game-subtitle {
      font-size: 0.85rem;
    }
  
    .enigma-form-group {
      flex-direction: column;
    }
  
    .enigma-input {
      width: 100%;
      min-width: 0;
    }
  
    .enigma-button {
      width: 100%;
    }
  
    /* Indicador de rolagem para a tabela */
    .enigma-table-container::after {
      content: "← Deslize para ver mais →";
      display: block;
      text-align: center;
      padding: 8px;
      font-size: 0.75rem;
      color: #a0aec0;
    }
    .enigma-no-image {
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #2d3748;
      color: #cbd5e0;
      font-size: 10px;
      text-align: center;
      border-radius: 4px;
      border: 2px solid #4a5568;
    }
    
    .enigma-table-cell-left {
      padding: 0.75rem 0.5rem;
      text-align: center !important; /* Centraliza a imagem */
      position: sticky;
      left: 0;
      background-color: #1a202c;
      z-index: 5;
      width: 64px;
    }
    
    /* Adiciona efeito hover nas imagens */
    .enigma-table-cell-left img:hover,
    .enigma-no-image:hover {
      transform: scale(1.1);
      box-shadow: 0 0 8px rgba(236, 201, 75, 0.6);
      transition: all 0.2s ease-in-out;
    }

  
  .enigma-no-image {
    width: 100px !important;
    height: 100px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2d3748;
    color: #cbd5e0;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    border: 2px solid #4a5568;
  }

  .enigma-table-cell-left {
    padding: 0.75rem 0.5rem;
    text-align: center !important;
    position: sticky;
    left: 0;
    background-color: #1a202c;
    z-index: 5;
    width: 110px;
  }


  .enigma-table-cell-left img:hover,
  .enigma-no-image:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(236, 201, 75, 0.6);
    transition: all 0.2s ease-in-out;
  }

  /* Estilo para células de texto longo com tooltip */
  .enigma-table-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px; /* Limita largura da célula */
    cursor: help; /* Mostra cursor de ajuda para indicar tooltip */
  }

  /* Cores de comparação de texto parcial */
  .enigma-cell-partial {
    background-color: #d69e2e;
    color: black;
  }
  .enigma-scp-image {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    object-fit: cover !important;
    display: inline-block !important;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  .enigma-scp-image:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(236, 201, 75, 0.7);
  }
  
  .enigma-no-image {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #2d3748 !important;
    color: #cbd5e0 !important;
    font-size: 14px !important;
    text-align: center !important;
    border-radius: 4px !important;
    border: 2px solid #4a5568 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease;
  }
  
  .enigma-no-image:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(236, 201, 75, 0.7);
  }
  
  .enigma-table-cell-left {
    padding: 0.75rem 0.5rem;
    text-align: center !important;
    position: sticky;
    left: 0;
    background-color: #1a202c;
    z-index: 5;
    width: 110px; /* Aumentado para acomodar imagens */
  }
  
  /* Estilo para células de texto longo com tooltip */
  .enigma-table-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px; /* Limita largura da célula */
    cursor: help; /* Mostra cursor de ajuda para indicar tooltip */
  }
  
  /* Cores de comparação de texto parcial */
  .enigma-cell-partial {
    background-color: #d69e2e;
    color: black;
  }
  
  /* Estilos para o modal */
  .enigma-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
  }
  
  .enigma-modal-content {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .enigma-modal-image {
    max-width: 80%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }
  
  .enigma-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  .enigma-modal-close:hover {
    transform: scale(1.2);
  }
  
  .enigma-modal-info {
    text-align: center;
    margin-top: 15px;
  }
  
  .enigma-modal-info h3 {
    margin: 5px 0;
    color: #ecc94b;
    font-size: 24px;
  }
  
  .enigma-modal-info p {
    margin: 5px 0;
    color: #e2e8f0;
    font-size: 16px;
  }

  .enigma-table-header th:nth-child(6) {
    min-width: 80px;
    width: 80px;
  }
  
  /* Garante que as células de dados na coluna "Ano" também mantenham a mesma largura */
  .enigma-table-row td:nth-child(6) {
    min-width: 80px;
    width: 80px;
    white-space: nowrap;
  }
  
  /* Opcional: Se precisar ajustar a largura da coluna "Ano" em dispositivos móveis */
  @media (max-width: 480px) {
    .enigma-table-header th:nth-child(6),
    .enigma-table-row td:nth-child(6) {
      min-width: 60px;
      width: 60px;
    }
  }

  /* Animação de confetes */
@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes confetti-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
}

/* Animação de entrada para o modal */
@keyframes modal-appear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animação de pulso para o título de vitória */
@keyframes title-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Estilos gerais do modal */
.enigma-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.enigma-modal-content {
  position: relative;
  padding: 30px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(26, 32, 44, 0.9);
  max-width: 90%;
  max-height: 90%;
  animation: modal-appear 0.3s ease-out forwards;
}

/* Estilos de vitória */
.enigma-modal-content-success {
  border: 3px solid #48bb78;
  box-shadow: 0 0 25px rgba(72, 187, 120, 0.4);
}

/* Estilos de derrota */
.enigma-modal-content-fail {
  border: 3px solid #f56565;
  box-shadow: 0 0 25px rgba(245, 101, 101, 0.4);
}

/* Títulos personalizados */
.enigma-modal-title-success {
  color: #48bb78 !important;
  font-size: 28px !important;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(72, 187, 120, 0.5);
  animation: title-pulse 2s infinite;
}

.enigma-modal-title-fail {
  color: #f56565 !important;
  font-size: 26px !important;
  font-weight: bold;
}

.enigma-modal-title-neutral {
  color: #ecc94b !important;
  font-size: 24px !important;
}

/* Imagem do SCP */
.enigma-modal-image {
  max-width: 80%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
}

.enigma-modal-image-success {
  box-shadow: 0 0 30px rgba(236, 201, 75, 0.8);
}

/* Mensagens de vitória/derrota */
.enigma-modal-victory-message {
  font-size: 16px;
  margin-top: 15px;
  color: #c6f6d5;
  text-align: center;
  line-height: 1.5;
}

.enigma-modal-defeat-message {
  font-size: 16px;
  margin-top: 15px;
  color: #fed7d7;
  text-align: center;
  line-height: 1.5;
}

/* Botão de fechar */
.enigma-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.enigma-modal-close:hover {
  transform: scale(1.2);
}

/* Responsividade para dispositivos móveis */
@media (max-width: 480px) {
  .enigma-modal-content {
    padding: 20px;
  }
  
  .enigma-modal-title-success {
    font-size: 22px !important;
  }
  
  .enigma-modal-title-fail,
  .enigma-modal-title-neutral {
    font-size: 20px !important;
  }
  
  .enigma-modal-victory-message,
  .enigma-modal-defeat-message {
    font-size: 14px;
  }
}
.enigma-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.enigma-scp-logo {
  margin-right: 15px;
  transition: transform 0.3s ease;
  width: 50px;
  height: auto;
  object-fit: contain;
}

/* Efeito de rotação suave no hover */
.enigma-scp-logo:hover {
  transform: rotate(120deg);
}

/* Pulso sutil animando o logo */
@keyframes logo-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Aplicar animação de pulso no logo quando o jogo inicia */
.enigma-game-container:not(.game-over) .enigma-scp-logo {
  animation: logo-pulse 3s infinite ease-in-out;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 480px) {
  .enigma-scp-logo {
    width: 35px;
    margin-right: 10px;
  }
}
/* Correção definitiva para a coluna "Ano" */

/* Define largura fixa para o cabeçalho da coluna Ano */
.enigma-table-header th:last-child {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  text-align: center !important;
  padding: 0.75rem 0.25rem !important;
}

/* Define largura fixa para as células da coluna Ano */
.enigma-table-row td:last-child {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  text-align: center !important;
  padding: 0.75rem 0.25rem !important;
  white-space: nowrap !important;
  font-weight: bold;
}

/* Garante que o texto seja centralizado e não quebre */
.enigma-table-row td:last-child,
.enigma-table-header th:last-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Ajuste para mobile */
@media (max-width: 480px) {
  .enigma-table-header th:last-child,
  .enigma-table-row td:last-child {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    font-size: 0.8rem !important;
  }
}
}