/* Fonte global */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;600;700&family=Noto+Serif:wght@400;700&display=swap');

body{
  margin:0;
  font-family:'Noto Sans', sans-serif;
  background:linear-gradient(160deg,#1A0D1F,#5C2C6E);
  color:#E6D6F2;
  text-align:center;
  overflow-x:hidden;
}

/* TITULOS */
h1, h2{
  font-family:'Noto Serif', serif;
  margin:0;
}
h1{
  color:#845DA7;
  margin-top:40px;
}
h2{
  font-weight:400;
  color:#B390D3;
  margin-bottom:30px;
}

/* LANG */
#langBox{
  position:fixed;
  top:70px;
  left:20px;
  z-index:1000;
}
#langMain{
  background:#5C2C6E;
  border:4px solid #845DA7;
  color:#E6D6F2;
  padding:10px 18px;
  cursor:pointer;
  font-family:'Noto Sans', sans-serif;
}
#langOptions{
  display:none;
  background:#3B1F4A;
  border:4px solid #5C2C6E;
  margin-top:5px;
  max-height:300px;
  overflow-y:auto;
}
#langOptions button{
  width:100%;
  background:none;
  border:none;
  color:#E6D6F2;
  padding:10px;
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Noto Sans', sans-serif;
}
#langOptions button:hover{
  background:#5C2C6E;
}
#langOptions img{width:20px}

/* BUSCA */
#buscaBox{
  position:fixed;
  top:200px;
  left:20px;
  width:230px;
  background:#5C2C6E;
  border:4px solid #845DA7;
  padding:16px;
  text-align:left;
}
#buscaBox p{
  margin:0 0 10px;
  font-size:14px;
  color:#E6D6F2;
}
#buscaBox input{
  width:100%;
  padding:10px;
  background:#3B1F4A;
  border:3px solid #5C2C6E;
  color:#E6D6F2;
}
#buscaBox button{
  margin-top:10px;
  width:100%;
  padding:10px;
  background:#845DA7;
  border:3px solid #B390D3;
  color:#1A0D1F;
  cursor:pointer;
  font-weight:700;
  transition: transform 0.15s ease;
}
#buscaBox button:active{
  transform: scale(0.95);
}

/* FORM */
.envio{
  max-width:420px;
  margin:auto;
}
input,textarea,button{
  width:100%;
  box-sizing:border-box;
  font-family:'Noto Sans', sans-serif;
}
input,textarea{
  margin:6px 0;
  padding:14px;
  background:#3B1F4A;
  border:3px solid #5C2C6E;
  color:#E6D6F2;
  border-radius:10px;
}
textarea{
  min-height:140px; 
  max-height:200px;
  resize:vertical;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
button{
  padding:14px;
  margin-top:10px;
  background:#845DA7;
  border:3px solid #B390D3;
  color:#1A0D1F;
  cursor:pointer;
  border-radius:10px;
  font-weight:700;
  transition: transform 0.15s ease;
}
button:active{
  transform: scale(0.95);
}

/* CARTAS - ANIMAÇÃO HORIZONTAL */
#resultado{
  margin-top:60px;
  overflow:hidden;
  width:100%;
}

.cartas{
  display:flex;
  gap:30px;
  animation: scrollCartas 60s linear infinite;
  width: max-content;
}

@keyframes scrollCartas {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.carta{
  min-width:240px;
  max-width:240px;
  padding:24px;
  background:#5C2C6E;
  border:4px solid #845DA7;
  border-radius:18px;
  cursor:pointer;
  color:#E6D6F2;
  flex-shrink: 0;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

.carta:hover{
  background:#6B3A7E;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

/* MODAL */
#modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:none;
  align-items:center;
  justify-content:center;
  padding:10px;
  z-index:2000;
}
#modalContent{
  background:#5C2C6E;
  border:4px solid #B390D3;
  padding:32px;
  max-width:500px;
  width:100%;
  max-height:80vh;
  border-radius:20px;
  color:#E6D6F2;
  text-align:left;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(.3,1.5,.5,1), opacity 0.2s ease;
  overflow-y:auto;
}
#modal.show #modalContent{
  transform: scale(1);
  opacity: 1;
}
#modalContent h3{
  margin-top:0;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
#modalContent p{
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.mensagem-modal{
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:break-word;
  max-height:50vh;
  overflow-y:auto;
  padding-right:10px;
  line-height:1.6;
}

/* Scrollbar customizada para o modal */
.mensagem-modal::-webkit-scrollbar {
  width: 8px;
}
.mensagem-modal::-webkit-scrollbar-track {
  background: #3B1F4A;
  border-radius: 10px;
}
.mensagem-modal::-webkit-scrollbar-thumb {
  background: #845DA7;
  border-radius: 10px;
}
.mensagem-modal::-webkit-scrollbar-thumb:hover {
  background: #B390D3;
}

/* KOFI */
#kofi{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#845DA7;
  border:4px solid #B390D3;
  border-radius:30px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#1A0D1F;
  text-decoration:none;
  font-weight:800;
}
#kofi img{width:28px;}

/* RESPONSIVIDADE CELULAR */
@media(max-width:768px){
  #langBox{
    position:static;
    margin:10px auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  #buscaBox{
    position:static;
    width:90%;
    margin:10px auto;
    padding:12px;
  }
  .envio{
    max-width:90%;
    margin:10px auto;
    padding:0;
  }
  #resultado{
    margin-top:20px;
  }
  
  .cartas{
    animation: scrollCartas 40s linear infinite;
  }
  
  .carta{
    min-width:200px;
    max-width:200px;
    padding:20px;
  }
  
  #modalContent{
    max-width:90%;
    padding:24px;
  }
  
  .mensagem-modal{
    max-height:40vh;
  }
  
  h1{font-size:1.5rem; margin-top:20px;}
  h2{font-size:1.1rem; margin-bottom:20px;}
  #kofi{
    position:static;
    display:flex;
    justify-content:center;
    margin:20px auto;
  }
}