/* ========================================================= */
/* --- ESTILOS GERAIS DA PÁGINA (DESAFIO CSS: PÓKEMON) --- */
/* ========================================================= */

body {
    font-family: 'Inter', sans-serif;
    background-color: #111827; /* Fundo escuro (cinza-900) */
    color: #F3F4F6; /* Texto claro (cinza-100) */
}
.container {
    max-width: 1280px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #1F2937; /* Fundo dos cards (cinza-800) */
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}
.exercise-card {
    background-color: #374151; /* Fundo do exercício (cinza-700) */
    border-radius: 0.75rem;
    padding: 1.75rem;
    margin-bottom: 2.25rem;
    border: 1px solid #4B5563; /* Borda (cinza-600) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Badges de conceito */
.badge-concept {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}
.badge-flex {
    background-color: rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.4);
}
.badge-grid {
    background-color: rgba(59, 130, 246, 0.2);
    color: #93C5FD;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

/* Caixas de Instrução */
.instructions {
    background-color: #1E293B; /* Azul-ardósia escuro */
    color: #E2E8F0;
    margin-bottom: 1.25rem;
    border-left: 4px solid #EF4444; /* Vermelho Pokébola para Flexbox */
    padding: 1rem 1.25rem;
    border-radius: 0.375rem;
    line-height: 1.6;
}
.instructions.grid-theme {
    border-left-color: #3B82F6; /* Azul Greatball para Grid */
}
.hint-box {
    background-color: #0F172A;
    border: 1px dashed #475569;
    border-radius: 0.375rem;
    padding: 0.6rem 0.85rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #94A3B8;
}
.hint-box code {
    color: #38BDF8;
    background-color: #1E293B;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
}

/* Card do Pokémon (Área do Aluno) */
.pokemon {
    width: 100px;
    height: 100px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 2px dashed #6B7280; /* Borda (cinza-500) */
    background-color: #4B5563; /* Fundo (cinza-600) */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pokemon:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
    border-color: #F87171;
}
.pokemon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
}

/* Estilo para as instruções de entrega */
#delivery-info { 
    background-color: #1E3A8A; /* Azul escuro */
    border-left: 4px solid #3B82F6; /* Azul claro */
    padding: 1.5rem; 
    border-radius: 0.5rem; 
    margin-bottom: 2.5rem; 
    color: #E5E7EB;
}
#delivery-info ul { 
    list-style-type: disc; 
    margin-left: 1.5rem; 
    margin-top: 1rem; 
    line-height: 1.7;
}
#delivery-info code { 
    background-color: #374151; /* Cinza-700 */
    padding: 0.2rem 0.4rem; 
    border-radius: 0.25rem; 
    font-family: monospace; 
    font-size: 0.9em;
}
#delivery-info h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 0.5rem;
}

/* --- Animação do Título --- */
.animated-title {
    background: linear-gradient(
        90deg, 
        #F87171, /* Vermelho (Flex) */
        #FDE68A, /* Amarelo (Pikachu) */
        #A7F3D0, /* Verde (Bulbasaur) */
        #3B82F6, /* Azul (Grid) */
        #F87171  /* Vermelho (Loop) */
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-flow 6s linear infinite;
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* ========================================================= */
/* --- ÁREA DE CÓDIGO DO ALUNO: PARTE 1 (FLEXBOX) --- */
/* ========================================================= */

/* EX 1: Centralizar na Box (Flexbox) */
#ex1 .box {
    display: flex;
    background-color: #1F2937;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #52525B;
    /* SEU CÓDIGO FLEXBOX AQUI: Centralize horizontalmente no eixo principal */
    
}

/* EX 2: Espaçar Igualmente (Flexbox) */
#ex2 .box {
    display: flex;
    background-color: #1F2937;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #52525B;
    /* SEU CÓDIGO FLEXBOX AQUI: Distribua de ponta a ponta com espaço entre eles */
    
}

/* EX 3: Descanso na Grama (Flexbox) */
#ex3 .box {
    display: flex;
    background-color: #1F2937;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #52525B;
    height: 300px; /* Caixa alta */
    /* SEU CÓDIGO FLEXBOX AQUI: Alinhe todos na base (fundo) da caixa */
    
}

/* EX 4: Torre Pokémon (Flexbox) */
#ex4 .box {
    display: flex;
    background-color: #1F2937;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #52525B;
    height: 450px; /* Caixa bem alta */
    /* SEU CÓDIGO FLEXBOX AQUI: */
    /* 1. Mude a direção para coluna */
    /* 2. Distribua o espaçamento vertical uniformemente */
    
}

/* EX 5: O Gengar Furtivo! (Flexbox - Alinhamento Individual) */
#ex5 .box {
    display: flex;
    background-color: #1F2937;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #52525B;
    height: 300px; /* Caixa alta */
    align-items: flex-start; /* Alakazam e Haunter já ficam no topo */
}
/* Seletores compatíveis (por classe, data attribute ou alt) */
#ex5 .pokemon.gengar,
#ex5 .pokemon[data-pokemon="Gengar"],
#ex5 .pokemon[alt="Gengar"] {
    /* SEU CÓDIGO ALIGN-SELF AQUI: Faça apenas o Gengar descer para o fundo */
    
}

/* ========================================================= */
/* --- ÁREA DE CÓDIGO DO ALUNO: PARTE 2 (CSS GRID) --- */
/* ========================================================= */

/* EX 6: Habitat Safari 2x2 (CSS Grid) */
#ex6 .habitat {
    background-color: #1F2937;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #52525B;
    display: grid;
    gap: 1rem;
    /* SEU CÓDIGO GRID AQUI: Crie 2 colunas de tamanhos iguais */
    
}

/* EX 7: Snorlax Bloqueia a Trilha (CSS Grid - Column Span) */
#ex7 .habitat {
    background-color: #1F2937;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #52525B;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}
/* Seletores compatíveis para o Snorlax */
#ex7 .pokemon.snorlax,
#ex7 .pokemon[data-pokemon="Snorlax"],
#ex7 .pokemon[alt="Snorlax"] {
    /* SEU CÓDIGO GRID-COLUMN AQUI: */
    /* 1. Faça o Snorlax ocupar 2 colunas (span 2 ou 1 / 3) */
    /* 2. Adicione width: 100% para o card preencher a largura total */
    
}

/* EX 8: As Vinhas do Oddish (CSS Grid - Row Span) */
#ex8 .habitat {
    background-color: #1F2937;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #52525B;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
/* Seletores compatíveis para o Oddish */
#ex8 .pokemon.oddish,
#ex8 .pokemon[data-pokemon="Oddish"],
#ex8 .pokemon[alt="Oddish"] {
    /* SEU CÓDIGO GRID-ROW AQUI: */
    /* 1. Faça o Oddish ocupar 2 linhas verticais (span 2 ou 1 / 3) */
    /* 2. Adicione height: 100% para o card acompanhar a altura total */
    
}

/* EX 9: Habitat Dia e Noite (CSS Grid - Alinhamento Horizontal em Células) */
#ex9 .habitat {
    background-color: #1F2937;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #52525B;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr);
}
/* Pokémon Diurnos: Sentret e Ledyba */
#ex9 .pokemon.diurno,
#ex9 .pokemon.sentret,
#ex9 .pokemon.ledyba,
#ex9 .pokemon[data-pokemon="Sentret"],
#ex9 .pokemon[data-pokemon="Ledyba"],
#ex9 .pokemon[alt="Sentret"],
#ex9 .pokemon[alt="Ledyba"] {
    /* SEU CÓDIGO JUSTIFY-SELF AQUI: Centralize horizontalmente em suas células */
    
}
/* Pokémon Noturnos: Hoothoot e Spinarak */
#ex9 .pokemon.noturno,
#ex9 .pokemon.hoothoot,
#ex9 .pokemon.spinarak,
#ex9 .pokemon[data-pokemon="Hoothoot"],
#ex9 .pokemon[data-pokemon="Spinarak"],
#ex9 .pokemon[alt="Hoothoot"],
#ex9 .pokemon[alt="Spinarak"] {
    /* SEU CÓDIGO JUSTIFY-SELF AQUI: Alinhe à direita (final) de suas células */
    
}

/* EX 10: Santuário dos Lendários (CSS Grid - Posicionamento Diagonal 3x3) */
#ex10 .habitat {
    background-color: #1F2937;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #52525B;
    display: grid;
    gap: 1rem;
    /* Matriz 3x3 */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 400px;
}
/* Articuno: Linha 1, Coluna 1 */
#ex10 .pokemon.articuno,
#ex10 .pokemon[data-pokemon="Articuno"],
#ex10 .pokemon[alt="Articuno"] {
    /* SEU CÓDIGO GRID-ROW/COLUMN AQUI: Posicione na Linha 1, Coluna 1 */
    
}
/* Zapdos: Linha 2, Coluna 2 */
#ex10 .pokemon.zapdos,
#ex10 .pokemon[data-pokemon="Zapdos"],
#ex10 .pokemon[alt="Zapdos"] {
    /* SEU CÓDIGO GRID-ROW/COLUMN AQUI: Posicione na Linha 2, Coluna 2 */
    
}
/* Moltres: Linha 3, Coluna 3 */
#ex10 .pokemon.moltres,
#ex10 .pokemon[data-pokemon="Moltres"],
#ex10 .pokemon[alt="Moltres"] {
    /* SEU CÓDIGO GRID-ROW/COLUMN AQUI: Posicione na Linha 3, Coluna 3 */
    
}

/* ========================================================= */
/* --- ESTILOS DO SISTEMA DE PRÉ-VISUALIZAÇÃO (GABARITO) --- */
/* ========================================================= */

/* Layout comparativo: Exibe lado a lado em telas médias/grandes */
.exercise-workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .exercise-workspace {
        grid-template-columns: 1fr 1fr;
    }
}

/* Cabeçalhos de painel */
.pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    padding: 0 0.25rem;
}
.pane-title {
    font-size: 0.875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.student-pane .pane-title {
    color: #93C5FD; /* Azul suave */
}
.expected-pane .pane-title {
    color: #6EE7B7; /* Esmeralda suave */
}

.pane-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.student-badge {
    background-color: rgba(59, 130, 246, 0.15);
    color: #93C5FD;
    border: 1px solid rgba(59, 130, 246, 0.35);
}
.expected-badge {
    background-color: rgba(16, 185, 129, 0.15);
    color: #6EE7B7;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

/* Legenda da meta esperada */
.expected-caption {
    margin-top: 0.6rem;
    font-size: 0.8125rem;
    color: #94A3B8;
    background-color: rgba(15, 23, 42, 0.7);
    padding: 0.5rem 0.85rem;
    border-radius: 0.375rem;
    border-left: 3px solid #10B981;
    line-height: 1.5;
}
.expected-caption code {
    color: #6EE7B7;
    background-color: #1E293B;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-family: monospace;
    font-size: 0.9em;
}

/* Card do Pokémon na Pré-visualização (Totalmente isolado do código do aluno) */
.expected-pokemon {
    width: 100px;
    height: 100px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 2px dashed #10B981; /* Borda esmeralda indicativa de meta */
    background-color: #1F2937;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
.expected-pokemon:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.25);
    border-color: #34D399;
}
.expected-pokemon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
}

/* Base dos contêineres esperados */
.expected-box, .expected-habitat {
    background-color: #111827;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #059669; /* Contorno esmeralda elegante */
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Selo sutil no canto do contêiner esperado */
.expected-box::after, .expected-habitat::after {
    content: "🎯 META";
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: rgba(16, 185, 129, 0.4);
    pointer-events: none;
}

/* ========================================================= */
/* --- GABARITO CSS VISUAL: EXERCÍCIOS 1 A 10 --- */
/* ========================================================= */

/* EX 1 Esperado: Centralização horizontal */
.expected-box-1 {
    display: flex;
    justify-content: center;
}

/* EX 2 Esperado: Espaço entre itens de ponta a ponta */
.expected-box-2 {
    display: flex;
    justify-content: space-between;
}

/* EX 3 Esperado: Alinhamento na base vertical */
.expected-box-3 {
    display: flex;
    align-items: flex-end;
    height: 300px;
}

/* EX 4 Esperado: Direção coluna com espaço vertical uniforme */
.expected-box-4 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 450px;
}

/* EX 5 Esperado: Alinhamento individual do Gengar na base */
.expected-box-5 {
    display: flex;
    align-items: flex-start;
    height: 300px;
}
.expected-box-5 .expected-gengar {
    align-self: flex-end;
}

/* EX 6 Esperado: Grid 2x2 com 2 colunas proporcionais */
.expected-habitat-6 {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

/* EX 7 Esperado: Snorlax mesclando 2 colunas */
.expected-habitat-7 {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}
.expected-habitat-7 .expected-snorlax {
    grid-column: span 2;
    width: 100%;
}

/* EX 8 Esperado: Oddish mesclando 2 linhas verticais */
.expected-habitat-8 {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.expected-habitat-8 .expected-oddish {
    grid-row: span 2;
    height: 100%;
}

/* EX 9 Esperado: Grid 4 colunas com justify-self */
.expected-habitat-9 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr);
}
.expected-habitat-9 .expected-diurno {
    justify-self: center;
}
.expected-habitat-9 .expected-noturno {
    justify-self: end;
}

/* EX 10 Esperado: Grid 3x3 diagonal dos pássaros lendários */
.expected-habitat-10 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 400px;
}
.expected-habitat-10 .expected-articuno {
    grid-row: 1;
    grid-column: 1;
}
.expected-habitat-10 .expected-zapdos {
    grid-row: 2;
    grid-column: 2;
}
.expected-habitat-10 .expected-moltres {
    grid-row: 3;
    grid-column: 3;
}