/* ===============================================
   🏰 HE-MAN VS SKELETOR - ROCK PAPER SCISSORS 🏰
   Epic CSS Theme with Professional Comments
   Version: Final Professional Edition
   =============================================== */

/* Reset universal - Remove margens e paddings padrão do navegador */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Importação das fontes do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Bangers&display=swap');

/* ===============================================
   🎨 SISTEMA DE CORES TEMÁTICAS (CSS VARIABLES)
   Organizadas por facções para manutenção fácil
   =============================================== */
:root {
    /* 🦸 Paleta He-Man - Cores heroicas e douradas */
    --heman-primary: #FFD700; /* Dourado principal - representa poder */
    --heman-secondary: #FF4500; /* Laranja vibrante - energia heroica */
    --heman-accent: #FFA500; /* Laranja médio - detalhes */
    --heman-light: #FFFF99; /* Amarelo claro - textos claros */
    --skeletor-primary: #4A0E4E; /* Roxo escuro - poder sombrio */
    --skeletor-secondary: #8A2BE2; /* Azul-violeta - magia */
    --skeletor-accent: #6A0DAD; /* Roxo médio - acentos */
    --skeletor-dark: #2E0831; /* Roxo muito escuro - sombras */
    --castle-gray: #708090; /* Cinza do castelo */
    --grayskull-dark: #1C1C1C; /* Preto das sombras */
    --power-glow: #00FFFF; /* Cyan - poder de Grayskull */
    --shadow-deep: rgba(0, 0, 0, 0.6); /* Sombra profunda universal */
    --heman-gradient: linear-gradient(135deg, var(--heman-primary) 0%, var(--heman-secondary) 50%, var(--heman-accent) 100%); /* Gradiente He-Man */
    --skeletor-gradient: linear-gradient(135deg, var(--skeletor-dark) 0%, var(--skeletor-primary) 50%, var(--skeletor-secondary) 100%); /* Gradiente Skeletor */
    --power-gradient: linear-gradient(45deg, var(--power-glow), transparent, var(--power-glow)); /* Gradiente poder */
}

/* ===============================================
   📱 CORPO DA PÁGINA - Background épico
   =============================================== */
body {
    /* CONTAINER PRINCIPAL - Arena da batalha */
    background: linear-gradient(135deg, var(--skeletor-dark) 0%, var(--castle-gray) 30%, var(--heman-accent) 70%, var(--heman-primary) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    height: 100vh;
    padding: 10px;
    margin: 0;
    overflow: hidden;
    font-family: 'Cinzel', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Efeito de atmosfera mística com pseudo-elemento */
body::before {
    content: ''; /* Pseudo-elemento vazio usado para efeitos visuais no background */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradientes radiais simulando poderes místicos */
    background:
        radial-gradient(circle at 20% 80%, rgba(138, 43, 226, 0.3) 0%, transparent 50%), /* Poder do Skeletor */
        radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.3) 0%, transparent 50%); /* Poder do He-Man */
    pointer-events: none;
    z-index: -1;
}

/* ===============================================
   🏰 CONTAINER PRINCIPAL - Arena da batalha
   =============================================== */
.container {
    /* Background complexo com múltiplas camadas representando o conflito */
    background: linear-gradient(135deg, rgba(28, 28, 28, 0.95) 0%, rgba(74, 14, 78, 0.9) 25%, rgba(112, 128, 144, 0.85) 50%, rgba(74, 14, 78, 0.9) 75%, rgba(28, 28, 28, 0.95) 100%); /* Fundo arena */
    border-radius: 20px; 
    padding: 15px; 
    box-shadow: 0 0 30px var(--power-glow), inset 0 0 20px rgba(255, 215, 0, 0.1), 0 8px 32px var(--shadow-deep); /* Brilho cyan, dourado, sombra */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: space-between; 
    gap: 8px; 
    width: min(550px, 95vw); /* Máximo 550px ou 95% da largura da tela */
    height: min(90vh, 650px); /* Máximo 90% da altura ou 650px */
    border: 3px solid transparent; /* Borda transparente para o background-clip */
    background-clip: padding-box; /* Clip do background para não vazar */
    position: relative; /* Para pseudo-elementos */
    overflow: hidden; /* Esconde overflow para efeitos */
}

/* Pseudo-elemento para borda animada colorida */
.container::before {
    content: ''; /* Pseudo-elemento vazio usado para borda animada */
    position: absolute; /* Posicionamento para cobrir toda a borda */
    top: -3px; /* Posição superior compensada */
    left: -3px; /* Posição esquerda compensada */
    right: -3px; /* Posição direita compensada */
    bottom: -3px; /* Posição inferior compensada */

    /* Gradiente das cores das facções alternadas */
    background: linear-gradient(45deg,
            var(--heman-primary), /* Dourado He-Man */
            var(--skeletor-secondary), /* Roxo Skeletor */
            var(--heman-primary)); /* Volta ao dourado */

    border-radius: 23px; 
    z-index: -1; /* Atrás do container */
    animation: powerPulse 3s ease-in-out infinite; /* Animação de pulso */
}

/* Animação de pulso para simular poder místico */
@keyframes powerPulse {
    0%, 100% { 
        opacity: 0.3; 
    }
    50% { 
        opacity: 0.7; 
    }
}

/* ===============================================
   🖼️ IMAGEM/GIF - Moldura épica para personagens
   =============================================== */
.container img {
    max-width: 170px; 
    height: auto; 
    object-fit: contain; /* Ajusta sem distorção */
    display: block; 
    margin-bottom: 3px; 
    border-radius: 15px; 
    border: 2px solid var(--heman-primary); /* Moldura dourada */
    box-shadow: 0 0 20px var(--power-glow), 0 4px 15px var(--shadow-deep); /* Brilho cyan externo, sombra de profundidade */
    filter: brightness(1.1) contrast(1.2); /* Aumenta brilho e contraste */
    transition: all 0.3s ease; /* Transição suave para hover */
}

/* Efeito hover na imagem - Poder se intensifica */
.container img:hover {
    transform: scale(1.05); /* Leve aumento no tamanho */
    box-shadow: 0 0 30px var(--power-glow), 0 6px 20px var(--shadow-deep); /* Brilho mais intenso, sombra mais profunda */
}

/* ===============================================
   📝 TÍTULOS ÉPICOS - Typography com efeitos de poder
   =============================================== */

/* Título principal - Nome do jogo */
h1 {
    color: var(--heman-primary); 
    font-size: 1.8rem; 
    font-family: 'Cinzel', serif; 
    font-weight: 700; 
    text-shadow: 0 0 10px var(--power-glow), 2px 2px 4px var(--shadow-deep), 0 0 20px var(--heman-accent); /* Brilho cyan, sombra, laranja */
    margin-bottom: 5px; 
    text-align: center; 
    letter-spacing: 2px; 
    text-transform: uppercase; /* Maiúsculas para impacto */
    animation: titleGlow 2s ease-in-out infinite alternate; /* Animação de brilho */
}

/* Animação de brilho alternado para o título */
@keyframes titleGlow {
    from {
        text-shadow: 0 0 10px var(--power-glow), 2px 2px 4px var(--shadow-deep); /* Brilho inicial */
    }
    to {
        text-shadow: 0 0 20px var(--power-glow), 2px 2px 4px var(--shadow-deep), 0 0 30px var(--heman-accent); /* Brilho intenso */
    }
}

/* Subtítulo - "Escolha sua arma" */
h2 {
    color: var(--heman-light); /* Amarelo claro para alta visibilidade */
    font-size: 1.1rem; /* Tamanho menor que h1 */
    font-family: 'Cinzel', serif; /* Mantém consistência tipográfica */
    font-weight: 600; /* Semi-bold */
    text-shadow: 0 0 12px var(--heman-primary), 2px 2px 4px var(--shadow-deep), 0 0 8px var(--heman-accent); /* Brilho dourado, sombra, laranja */
    margin-bottom: 5px; 
    text-align: center; 
    letter-spacing: 1px; 
}

/* ===============================================
   🎮 BOTÕES DE BATALHA - Controles épicos
   =============================================== */

/* Container dos botões - Organização horizontal */
.button-group {
    display: flex; 
    gap: 8px; 
    margin-top: 5px; 
    flex-wrap: wrap; /* Quebra linha se necessário */
    justify-content: center; 
}

/* Estilo base para todos os botões */
button {
    display: flex; 
    justify-content: center; 
    align-items: center;
    border-radius: 15px; 
    padding: 8px 12px; 
    font-size: 1.1rem; 
    font-family: 'Cinzel', serif; /* Mantém fonte épica */
    font-weight: 600; /* Semi-bold para legibilidade */
    cursor: pointer; 
    border: 2px solid transparent; /* Borda transparente inicial */
    color: var(--grayskull-dark); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); /* Sombra externa, brilho interno */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transição suave */
    min-width: 100px; 
    text-transform: uppercase; /* Maiúsculas para impacto */
    letter-spacing: 1px; 
    position: relative; 
    overflow: hidden; /* Esconde efeitos que vazam */
}

/* Efeito de brilho deslizante nos botões */
button::before {
    content: ''; /* Pseudo-elemento vazio usado para efeito de brilho nos botões */
    position: absolute; 
    top: 0; 
    left: -100%; /* Começa fora da tela à esquerda */
    width: 100%;
    height: 100%; 
    /* Gradiente de brilho que passa pelo botão */
    background: linear-gradient(90deg,
            transparent, /* Transparente nas bordas */
            rgba(255, 255, 255, 0.4), /* Branco semi-transparente no centro */
            transparent); /* Transparente nas bordas */
    transition: left 0.5s; /* Transição da posição */
}

/* Ativa o efeito de brilho no hover */
button:hover::before {
    left: 100%; /* Move o brilho para fora da tela à direita */
}

/* Estados de interação dos botões */
button:hover {
    transform: translateY(-2px) scale(1.05); /* Move para cima e aumenta */
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.4), /* Sombra mais intensa */
        inset 0 1px 0 rgba(255, 255, 255, 0.3); /* Brilho interno mais forte */
}

button:active {
    transform: translateY(0) scale(0.98); /* Volta à posição e diminui levemente */
}

/* ===============================================
   ⚔️ TEMAS ESPECÍFICOS DOS BOTÕES - Poderes das facções
   =============================================== */

/* Botão Papel - Poder dourado do He-Man */
#Papel {
    background: var(--heman-gradient); /* Gradiente heroico */
    border-color: var(--heman-primary); /* Borda dourada */
    color: var(--grayskull-dark); /* Texto escuro para contraste */
}

#Papel:hover {
    box-shadow:
        0 8px 25px rgba(255, 215, 0, 0.4), /* Sombra dourada no hover */
        inset 0 1px 0 rgba(255, 255, 255, 0.3); /* Brilho interno */
}

/* Botão Pedra - Poder sombrio do Skeletor */
#Pedra {
    background: var(--skeletor-gradient); /* Gradiente sombrio */
    border-color: var(--skeletor-primary); /* Borda roxa */
    color: var(--heman-light); /* Texto claro para contraste */
}

#Pedra:hover {
    box-shadow:
        0 8px 25px rgba(138, 43, 226, 0.4), /* Sombra roxa no hover */
        inset 0 1px 0 rgba(255, 255, 255, 0.3); /* Brilho interno */
}

/* Botão Tesoura - Poder misto das duas facções */
#Tesoura {
    /* Gradiente que combina poderes de ambas as facções */
    background: linear-gradient(135deg, var(--skeletor-primary) 0%, var(--heman-accent) 50%, var(--skeletor-secondary) 100%); /* Gradiente misto */
    border-color: var(--power-glow); /* Borda cyan do poder de Grayskull */
    color: white; /* Texto branco para contraste */
}

#Tesoura:hover {
    box-shadow:
        0 8px 25px rgba(0, 255, 255, 0.4), /* Sombra cyan no hover */
        inset 0 1px 0 rgba(255, 255, 255, 0.3); /* Brilho interno */
}

/* ===============================================
   📊 SISTEMA DE PONTUAÇÃO - Scores das facções
   =============================================== */

/* Pontuação da máquina (Skeletor) */
.skeletor-score {
    color: #E6E6FA;
    font-size: 1.1rem;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-shadow: 0 0 12px var(--skeletor-secondary), 2px 2px 4px var(--shadow-deep), 0 0 8px var(--power-glow);
    margin-bottom: 5px;
    text-align: center;
    letter-spacing: 1px;
}

/* Pontuação do jogador (He-Man) */
.heman-score {
    color: var(--heman-light);
    font-size: 1.1rem;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-shadow: 0 0 12px var(--heman-primary), 2px 2px 4px var(--shadow-deep), 0 0 8px var(--heman-accent);
    margin-bottom: 5px;
    text-align: center;
    letter-spacing: 1px;
}

/* ===============================================
   🔢 NÚMEROS DA PONTUAÇÃO - Destaque visual
   =============================================== */

/* Pontuação numérica do Skeletor */
#pontuacao-skeletor {
    color: #E6E6FA;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0 0 15px var(--skeletor-secondary), 2px 2px 4px var(--shadow-deep), 0 0 10px var(--power-glow);
}

/* Pontuação numérica do He-Man */
#pontuacao-heman {
    color: var(--heman-primary);
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0 0 12px var(--heman-accent), 2px 2px 4px var(--shadow-deep);
}

/* ===============================================
  🏆 DISPLAY DE RESULTADO - Arena de batalha
  =============================================== */
#resultado-input {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--heman-primary);
    background: linear-gradient(135deg, var(--grayskull-dark) 0%, rgba(28, 28, 28, 0.9) 100%);
    border: 2px solid var(--power-glow);
    border-radius: 15px;
    margin-top: 5px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3), inset 0 0 10px rgba(0, 255, 255, 0.1);
    width: 95%;
    min-height: 45px;
    padding: 5px;
    font-family: 'Cinzel', serif;
    text-shadow: 0 0 8px var(--power-glow);
    letter-spacing: 1px;
    resize: none;
    white-space: pre-wrap;
    max-height: 180px;
    display: block;
    line-height: 1.3;
    word-break: break-word;
}

/* ===============================================
   🔄 BOTÃO RESET - Poder de Grayskull
   =============================================== */
.reset-btn {
    margin-top: 5px; 
    padding: 6px 16px; 
    background: linear-gradient(135deg, var(--castle-gray) 0%, var(--skeletor-dark) 50%, var(--castle-gray) 100%); /* Gradiente castelo neutro */
    color: var(--heman-primary); /* Texto dourado */
    border: 2px solid var(--power-glow); /* Borda cyan do poder */
    border-radius: 15px; 
    font-size: 1rem; 
    font-family: 'Cinzel', serif; /* Fonte épica */
    font-weight: 600; 
    cursor: pointer; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Sombra externa, brilho interno */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    letter-spacing: 1px; 
    text-transform: uppercase; /* Maiúsculas para impacto */
    position: relative; /* Para pseudo-elementos */
    overflow: hidden; /* Esconde efeitos que vazam */
}

/* Efeito de poder pulsante no botão reset */
.reset-btn::before {
    content: ''; /* Pseudo-elemento vazio usado para efeito pulsante do botão reset */
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 0; 
    height: 0; 
    /* Gradiente radial simulando poder de Grayskull */
    background: radial-gradient(circle, var(--power-glow), transparent); /* Gradiente radial cyan */
    transition: all 0.3s ease; /* Transição suave */
    transform: translate(-50%, -50%); /* Centraliza o efeito */
}

/* Ativa o efeito de poder no hover */
.reset-btn:hover::before {
    width: 200px; 
    height: 200px; 
    opacity: 0.1; 
}

/* Estados de interação do botão reset */
.reset-btn:hover {
    transform: translateY(-2px); /* Move para cima */
    box-shadow:
        0 8px 25px rgba(0, 255, 255, 0.3), /* Sombra cyan mais intensa */
        inset 0 1px 0 rgba(255, 255, 255, 0.2); /* Brilho interno mais forte */
    text-shadow: 0 0 10px var(--power-glow); /* Brilho no texto */
}

/* ===============================================
    📱 RESPONSIVIDADE MÓVEL - Mantém qualidade épica
    Otimizado para telas de até 600px de largura
    =============================================== */
@media (max-width: 600px) {

 
    body {
        padding: 5px; 
        overflow-y: auto; /* Permite scroll vertical se o conteúdo exceder a tela */
        height: auto; 
    }

    /* Adaptações do container principal */
    .container {
        width: 95vw; 
        height: auto; 
        max-height: 98vh; 
        padding: 15px; 
        gap: 10px; 
        justify-content: center; 
    }

    
    .container img {
        max-width: 150px; 
        margin-bottom: 5px; /* Espaço inferior */
    }

   
    h1 {
        font-size: 1.6rem; 
        margin-bottom: 5px; 
    }

    h2 {
        font-size: 1rem; 
        margin-bottom: 5px; 
    }

    .button-group {
        flex-direction: column; 
        gap: 8px; 
        width: 100%; 
    }

    button {
        font-size: 1rem; 
        padding: 10px 15px; 
        width: 100%; 
        min-width: 0; 
        margin: 0; 
    }

    .skeletor-score,
    .heman-score {
        font-size: 1rem; 
        margin-top: 5px; 
    }

    #pontuacao-skeletor,
    #pontuacao-heman {
        font-size: 1.2rem; 
    }

    #resultado-input {
        font-size: 1.2rem; 
        min-height: 60px; 
        max-height: 200px; 
        margin-top: 8px; 
        overflow-y: auto; /* Permite scroll se o texto for muito longo */
        resize: none; /* Remove redimensionamento */
    }
}

/* ==============================
   SAUDAÇÃO HE-MAN - OVERLAY
   ============================== */

/* Overlay da saudação */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 15, 0.95); /* fundo escuro semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* Conteúdo central da saudação */
.saudacao-content {
    text-align: center;
    color: #fff;
    max-width: 500px;
    padding: 20px;
    background: #222;
    border: 3px solid #f4d03f;
    border-radius: 20px;
    box-shadow: 0 0 25px #f1c40f;
}

/* Imagem do He-Man */
.heman-img {
    max-width: 250px;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

/* Animação de leve "pulse" na imagem */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Título da saudação */
p {
    color: var(--heman-light); /* Amarelo claro */
    font-size: 1.1rem;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-shadow: 0 0 12px var(--heman-primary), 2px 2px 4px var(--shadow-deep), 0 0 8px var(--heman-accent); /* Brilho dourado, sombra, laranja */
    margin-top: 18px;
    margin-bottom: 24px;
    text-align: center;
    letter-spacing: 1px;
}
/* Botão de começar batalha */
.saudacao-content button {
    margin-top: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 6px 16px;
    background: linear-gradient(135deg, var(--castle-gray) 0%, var(--skeletor-dark) 50%, var(--castle-gray) 100%);
    color: var(--heman-primary);
    border: 2px solid var(--power-glow);
    border-radius: 15px;
    font-size: 1rem;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.saudacao-content button:hover {
    background: #ffeb3b;
    transform: scale(1.05);
}

/* ==============================
   RESPONSIVIDADE MÓVEL PARA SAUDAÇÃO
   ============================== */
@media (max-width: 600px) {
    .saudacao-content {
        max-width: 98vw;
        width: 100%;
        padding: 8vw 3vw;
        box-sizing: border-box;
        border-radius: 12px;
    }

    .heman-img {
        max-width: 60vw;
        width: 100%;
        height: auto;
        margin-bottom: 12px;
    }

    .saudacao-content h1 {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }

    .saudacao-content p {
        font-size: 0.95rem;
        margin-top: 12px;
        margin-bottom: 18px;
    }

    .saudacao-content button {
        font-size: 1rem;
        padding: 10px 0;
        width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }
}