<!--
Arquivo: style.css
Descrição: Aquivo de estilos do site
Autor: Agnelo Honorato
Data: 01/03/26
-->


/* 1. BASE (estrutura geral)
========================= */

html {
   overflow-y: scroll;
}

body{
margin:0;
background:#072807;
font-family:Arial, sans-serif;
color:white;
}

header{
background:black;
border-bottom: 2px solid #ffd700;
padding:5px 0;
position: relative; /* 🔥 IMPORTANTE */
overflow: hidden;   /* 🔥 IMPORTANTE */
 z-index: 2;
 width: 100%;
}

footer{
background:black;
padding:5px;
margin-top:0px;
text-align:center;
border-top: 2px solid #ffd700;
position: relative; /* 🔥 IMPORTANTE */
overflow: hidden;   /* 🔥 IMPORTANTE */
 width: 100%;
}

footer p {
  margin: 5px 0;
}

/* 2. LAYOUT (estrutura de página)
========================= */

.container{
max-width:800px;
margin:0 auto;
text-align:center;
padding:5px;
}

.pagina-baralho{
display:flex;
flex-direction:column;
align-items:stretch; /* 🔥 CORREÇÃO */
background:#0b3d0b;
}


/* 3. TOPO / MENU
========================= */

.menu-topo{
background:transparent;
padding:5px 0;
}

.menu-topo ul{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:8px;
padding:0;
margin:5px 0;
list-style:none;
}

.menu-topo a{
color:#ffd700;
text-decoration:none;
font-weight:bold;
}

.menu-topo a:hover{
text-decoration:underline;
}

.menu-secundario{
border-top: 1px solid #ffd700;
padding-top: 10px;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin:5px 0 10px 0;
}

.titulo-secao {
     text-align: center;
    color: #ffd700;
    margin: 10px 0;
    font-weight: bold;
    border-top: 1px solid #ffd700;
    padding-top: 8px;
}

.menu-secundario .botao:hover{
background:#a52a2a;
color:#ffffff;
}


/* 4. TÍTULOS
========================= */

.titulo{
color:#ffd700;
margin:5px 0;
letter-spacing:2px;
text-align:center;
}


/* 5. FORMULÁRIO
========================= */

.formulario{
background:#145214;
padding:20px;
border-radius:10px;
width:90vw;
max-width:900px;
margin-bottom:20px;
border:2px solid #ffd700;
margin: 0 auto; /* 🔥 centraliza */
}

.linha-topo{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;
}

.formulario label{
font-weight:bold;
color:#ffd700;
}

.formulario input,
.formulario select {
width:100%;
height:38px; /* 🔥 garante altura igual */
padding:8px;
margin-bottom:5cqb
border-radius:5px;
border:1px solid #2a7a2a;
background:#0b3d0b;
color:white;
box-sizing: border-box;
}

#pergunta {
    height: 38px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.formulario input::placeholder{
color:#cccccc;
}

.linha-pergunta {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.linha-pergunta input {
    width: 100%;
}

.linha-pergunta .tema {
    width: 200px;
}

.linha-pergunta .pergunta {
    flex: 1;
}

/*    6. GRID / CARTAS
========================= */

.grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:6px;
width:90vw;
max-width:900px;
margin:20px auto;
}

.card{
background:#145214;
border:2px solid #ffd700;
border-radius:8px;
aspect-ratio:2/3;
max-width:90px;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
}

.card.selecionada{
background:#ffd700;
}

.card:hover{
transform:scale(1.05);
background:#1f6f1f;
}


/* 7. BOTÕES
========================= */

#btnInstalar {
  background: #ffd700;
  border: 2px solid #28a745;
  border-radius:8px;
  font-weight:bold;
  font-size:16px;
  font-family:Arial, sans-serif;
}

#btnInstalar:hover {
  background: #a52a2a;
}

.botao{
display:inline-block;
margin:5px;
padding:10px 20px;

font-weight:bold;
font-size:16px;
font-family:Arial, sans-serif;
line-height:1.2;

border-radius:8px;
border:2px solid #ffd700;

background:#ffd700;
color:#072807;

text-decoration:none;
cursor:pointer;
transition: all 0.2s ease;

appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
}

.botao:hover{
background:#a52a2a;
color:#ffffff;
}

.botoes{
margin-top:5px;
display:flex;
justify-content:center;
gap:15px;
}

/* 8. HORÓSCOPO
========================= */

.horoscopodia h2 {
    text-align: center;
}

.horoscopodia p {
    text-align: left;
    max-width: 700px;
    margin: 0 auto 6%uto;
}

.horoscopodia p.last-of-type {
    margin-bottom: 5px;
}

/* Céu estrelado */
.ceu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Estrelas discretas */

.estrelas::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow:
        20px 30px white,
        60px 80px white,
        100px 50px white,
        140px 120px white,
        180px 40px white,
        220px 90px white,
        260px 60px white,
        300px 110px white,
        340px 30px white,
        380px 70px white,
        420px 100px white,
        460px 50px white,
        500px 120px white,
        540px 40px white,
        580px 90px white,
        620px 60px white,
        660px 110px white,
        700px 30px white,
        740px 70px white,
        780px 100px white;
    opacity: 0.7; /* 🔥 mais visível */
}

.lua {
    position: absolute;
    top: 15px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    
    background:
        radial-gradient(circle at 30% 30%, #ffffff 5%, transparent 6%),
        radial-gradient(circle at 70% 40%, #e0e0c0 8%, transparent 9%),
        radial-gradient(circle at 50% 70%, #d6d6a8 10%, transparent 11%),
        radial-gradient(circle at 40% 60%, #cfcf9a 6%, transparent 7%),
        radial-gradient(circle at center, #f5f3ce 60%, #e0deb0 100%);
 
    box-shadow: 
           0 0 20px rgba(255, 255, 200, 0.6);
           0 0 40px rgba(255, 255, 200, 0.3);
        
           opacity: 0.95;
}

.cometa {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        0 0 10px white,
        0 0 20px white,
        0 0 30px rgba(255,255,255,0.6);
    opacity: 10;
    z-index: 1;
}

/* 🔥 CAUDA DO COMETA */
.cometa::after {
    content: "";
    position: absolute;

    top: 50%;
    left: 50%;

    width: 50px;
    height: 2px;

    background: linear-gradient(
        to right,
        rgba(255,255,255,0.8),
        rgba(255,255,255,0)
    );

    transform-origin: left center;

    transform: translate(0, -50%) rotate(-45deg);
}