/* Importando a fonte do Google */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');

/* Variáveis de cor */
:root {
    --cor-fundo: #F7F3E9;
    --cor-vermelha: #FF6B6B;
    --cor-vermelha-sombra: #c85050;
    --cor-azul: #4ECDC4;
    --cor-verde: #57A773;
    --cor-verde-sombra: #417d56;
    --cor-amarela: #FFD166;
    --cor-texto: #454545;
}

/* Todo o resto do seu CSS exatamente como estava */
body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    margin: 0;
    padding: 20px;
}

  .screen {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: calc(100vh - 40px);
            text-align: center;
            gap: 15px;
        }

        .screen.active {
            display: flex;
        }

        /* --- Estilos Gerais --- */
        h1 { color: var(--cor-vermelha); font-size: 3em; font-weight: 800; margin: 0; }
        p { font-size: 1.2em; max-width: 500px; margin: 0; }
        
        button {
            padding: 15px 40px; font-size: 1.5em; font-weight: 700; cursor: pointer;
            border-radius: 50px; border: none; color: white; transition: all 0.1s ease-in-out;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3); background-color: var(--cor-vermelha);
            box-shadow: 0 6px 0 var(--cor-vermelha-sombra);
        }
        button:hover:not(:disabled) { transform: translateY(-2px); }
        button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--cor-vermelha-sombra); }
        button:disabled { background-color: #cccccc; cursor: not-allowed; box-shadow: 0 6px 0 #999; }
        
        .input-group { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; max-width: 450px; }
        input[type="text"] {
            padding: 15px; font-size: 1.2em; border-radius: 20px;
            border: 3px solid var(--cor-azul); text-align: center; width: 90%;
        }
        .disclaimer { font-size: 0.8em; color: #888; }

        /* --- TELA DE INÍCIO --- */
        #welcomeScreen img { width: 120px; }

        /* --- TELA DE JOGO --- */
        .game-header { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 15px; width: 100%; max-width: 900px; margin-bottom: 20px; background: white; padding: 10px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .header-info { font-size: 1.3em; font-weight: bold; }
        .header-info span { color: var(--cor-vermelha); }
        
        .roulette-section { display: flex; justify-content: center; align-items: center; gap: 50px; margin-bottom: 20px; flex-wrap: wrap; }
        .spinner-container { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; transition: all 0.5s ease, z-index 0s; }
        .spinner-container.spinning { width: 40vw; height: 40vw; max-width: 80vh; max-height: 80vh; transform: scale(1.25); z-index: 100; }
        .spinner { width: 100%; height: 100%; transition: transform 7s cubic-bezier(0.25, 0.1, 0.25, 1); }
        .arrow { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 40px; z-index: 10; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2)); }
        
        #calculation { font-size: 2em; font-weight: bold; height: 50px; }
        
        .number-grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: 8px; padding: 15px; background-color: #d1f1ef; border: 4px solid var(--cor-azul); border-radius: 20px; max-width: 800px; }
        .number-cell { background-color: #ffffff; border-radius: 10px; padding: 10px; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-weight: 700; }
        .number-grid.waiting-click .number-cell:hover { transform: scale(1.1); cursor: pointer; background-color: var(--cor-amarela); }
        .number-cell.correct { background-color: #84DCC6; transform: scale(1.2); }
        .number-cell.incorrect { background-color: #FFA69E; transform: scale(1.2); }

        /* --- TELA FINAL --- */
        #endScreen .button-group { display: flex; gap: 20px; }
        #sendResultBtn { background-color: var(--cor-verde); box-shadow: 0 6px 0 var(--cor-verde-sombra); }
        #sendResultBtn:active:not(:disabled) { box-shadow: 0 2px 0 var(--cor-verde-sombra); }
        #finalResultCard { background: white; border-radius: 20px; padding: 20px; margin: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 4px solid var(--cor-azul); }

        /* --- Botão Pular Treinamento --- */
        #skipTrainingBtn { background-color: var(--cor-azul); box-shadow: 0 6px 0 #3a9b93; }
        #skipTrainingBtn:active:not(:disabled) { box-shadow: 0 2px 0 #3a9b93; }
        
        #hallOfFameList {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }
        
        #hallOfFameList li {
            padding: 10px;
            margin: 5px 0;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
        }
        
        #hallOfFameList .trophy {
            width: 30px;
            display: inline-block;
            text-align: center;
        }
        
        #hallOfFameList .name {
            flex-grow: 1;
            margin: 0 10px;
        }
        
        #hallOfFameList .score {
            color: var(--cor-vermelha);
            font-weight: bold;
        }