/* =========================================
   1. FONTES
   ========================================= */
@font-face {
    font-family: 'Luciole';
    src: url('https://drxty.github.io/fonts/Luciole-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Luciole';
    src: url('https://drxty.github.io/fonts/Luciole-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Luciole';
    src: url('https://drxty.github.io/fonts/Luciole-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Luciole';
    src: url('https://drxty.github.io/fonts/Luciole-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/* =========================================
   2. VARIÁVEIS E TEMA (SUAS CORES PERSONALIZADAS)
   ========================================= */
:root {
    font-size: 16px;
    --bg-color: #5e5e5e;
    --text-color: #000000;
    --card-bg-color: #ffffff;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --border-color: #000000;
    --primary-color: #2563eb;
    --success-color: #16a34a;
    --danger-color: #dc2626;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #002828;
        --text-color: #fff7d9;
        --card-bg-color: #005f5f;
        --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
        --border-color: #fff7d9;
        --primary-color: #7F8EFF;
        --success-color: #efd2fc;
        --danger-color: #FF8888;
    }
}
/* Suporte a Tema Escuro (ativado via classe .dark no html) */
html.dark {
    --bg-color: #002828;
    --text-color: #fff7d9;
    --card-bg-color: #005f5f;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --border-color: #fff7d9;
    --primary-color: #7F8EFF;
    --success-color: #efd2fc;
    --danger-color: #FF8888;
}

/* =========================================
   3. ESTILOS GERAIS (A CORREÇÃO DO LAYOUT)
   ========================================= */
body {
    font-family: 'Luciole', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
    padding: 2rem 1rem;
    line-height: 1.5;
    
    /* Centralização Vertical e Horizontal */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

h1, h2, h3 {
    margin-top: 0;
    font-weight: normal;
}

a {
    Color: var(--text-color);
    text-decoration: underline;
}

a:hover {
    Color: var(--text-color);
    text-decoration-thickness: 3px;
}

/* =========================================
   4. UI COMPONENTS (Botões, Cards, Inputs)
   ========================================= */
.quiz-container {
    width: 100%;
    max-width: 800px; /* Limita largura para não esticar demais */
    z-index: 1;
}

.quiz-card {
    background-color: var(--card-bg-color);
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: var(--card-shadow);
    text-align: center;
    border: 1px solid var(--border-color);
}

.hidden {
    display: none !important;
}

button {
    font-family: 'Luciole', sans-serif;
    padding: 10px 20px;
    border-radius: 0.5rem;
    cursor: pointer;
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    font-size: 1rem;
    transition: all 0.2s ease;
    margin: 5px;
}

button:hover,
.info-btn:hover {
    box-shadow: 0 0px 0px, inset 0 0 0px 2px var(--border-color);
    transform: translateY(-1px);
}

button:active,
.info-btn:hover {
    transform: translateY(1px);
}

#prev-question-btn:disabled, 
#next-question-btn:disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Botão Principal em destaque */
#btn-generate-report,
.info-btn {
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    transition: background 0.2s, transform 0.1s;
    font-weight: normal;
    border-radius: 50px; /* Borda bem redonda (pílula) */
    padding: 8px 16px;
    font-size: 0.85rem;
    cursor: pointer;
}

#btn-copy-report, 
#btn-download-report {
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    transition: background 0.2s, transform 0.1s;
    font-weight: normal;
    font-size: 0.8rem;
    padding: 6px 12px;
}

.lang-selector {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 5px 15px;
    font-weight: bold;
}

/* O texto "PT" e "EN" */
.lang-btn {
    color: var(--text-color);
    text-decoration: none;
    opacity: 0.5; /* Meio apagado quando não selecionado */
    transition: opacity 0.3s;
}

/* O idioma selecionado */
.lang-btn.active {
    opacity: 1; /* Totalmente visível */
    text-decoration: underline;
}

.lang-btn:hover {
    opacity: 0.8;
}

#prev-question-btn, 
#next-question-btn {
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: normal;
    transition: background 0.2s, transform 0.1s;
}

#start-quiz-btn, 
#restart-btn, 
.primary-btn {
    font-size: 1.2rem;
    padding: 12px 30px;
    margin-top: 1rem;
    font-weight: normal;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg-color); /* Inverte cor para destaque */
    color: var(--text-color);
}

.info-btn:hover,
#prev-question-btn:hover, 
#next-question-btn:hover,
#start-quiz-btn:hover, 
#restart-btn:hover,
.primary-btn:hover {
    box-shadow: 0 0px 0px, inset 0 0 0px 2px var(--border-color);
    transform: translateY(-1px);
    color: var(--text-color);
}

#prev-question-btn:active, 
#next-question-btn:active,
#start-quiz-btn:active, 
#restart-btn:active, 
.primary-btn:active {
transform: translateY(1px);
}

input[type=range] {
    accent-color: var(--text-color);
    cursor: pointer;
}

.report-box{
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
/* =========================================
   5. LAYOUT DE GRÁFICOS (GRID)
   ========================================= */
.graphs-container {
    width: 100%;
}

.graphs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Desktop: 2 colunas */
@media (min-width: 768px) {
    .graphs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Centralizar o último gráfico (Intenções) se for ímpar */
    .graph-card:last-child:nth-child(odd) {
        grid-column: span 2;
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
    }
}

.graph-card {
    background-color: var(--card-bg-color);
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: none; /* Remove sombra extra dentro do card principal */
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.graph-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* =========================================
   6. ESTRUTURA INTERNA DO GRÁFICO
   ========================================= */
.graph-content {
    width: 100%;
    aspect-ratio: 1.6; /* Proporção do gráfico */
    display: flex;
    gap: 0.5rem;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 4px;
    background: #fff; /* Fundo branco para os patterns ficarem nítidos */
}

/* Colunas (Esquerda/Direita) */
.graph-column {
    width: 50%;
    display: flex;
    flex-direction: column;
    border-radius: 0.4rem;
    overflow: hidden;
}

.graph-column > div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

/* Coluna Central (Escala 0-50-100) */
.scale-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #000;
    font-weight: normal;
    padding: 0.25rem 0;
    width: 30px;
    align-items: center;
    z-index: 5;
}

/* Etiquetas de Texto sobre os padrões */
.text-overlay, .sub-categories .text-label {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 3px 8px;
    border-radius: 4px;
    color: black;
    font-size: 0.85rem;
    font-weight: normal;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    z-index: 2;
}

.sub-categories .text-label {
    font-size: 0.7rem;
    font-weight: normal;
    padding: 2px 5px;
}

/* Ponto Flutuante (Resultado) */
.floating-point {
    position: absolute;
    left: 50%;
    top: 50%; /* Inicial */
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 3px solid #000;
    border-radius: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: normal;
    color: black;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: top 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================
   7. PADRÕES VISUAIS (PATTERNS) - (MANTIDOS IGUAIS)
   ========================================= */

/* --- EIXO 1: ECONOMIA --- */
.pattern-laissez { background-color: #60a5fa; background-image: radial-gradient(circle at 1px 1px, #bfdbfe 1px, transparent 0); background-size: 20px 20px; }
.pattern-intervention { background-color: #f87171; background-image: repeating-linear-gradient(45deg, #ef4444 0, #ef4444 1px, transparent 0, transparent 50%); background-size: 8px 8px; }
.pattern-laissez-sub { background-color: #fef08a; background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-1 1l2-2m0 10l-2 2m10-12l2-2m0 10l2 2' stroke='%23facc15' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pattern-lib-econ { background-color: #dbeafe; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20L0 20z' fill='%2393c5fd' fill-opacity='0.5'/%3E%3C/svg%3E"); }
.pattern-socdem { background-color: #dcfce7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%2386efac' fill-opacity='0.4'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E"); }
.pattern-dirigisme { background-color: #ffedd5; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h16v2h-16zM0 8h16v2h-16zM0 14h16v2h-16z' fill='%23fdba74' fill-opacity='0.6' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.pattern-planning { background-color: #fee2e2; background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23dc2626' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); }

/* --- EIXO 2: SOCIEDADE --- */
.pattern-liberalism { background-color: #fde047; background-image: radial-gradient(#fbbf24 15%, transparent 15%); background-size: 20px 20px; }
.pattern-conservatism { background-color: #38bdf8; background-image: repeating-linear-gradient(-45deg, #0ea5e9, #0ea5e9 5px, transparent 5px, transparent 10px); }
.pattern-anarchic { background-color: #ffedd5; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='5' fill='%23fb923c'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 20px 20px;}
.pattern-liberal { background-color: #fef9c3; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2h8v8h-8z' fill='%23fde047' fill-opacity='0.5'/%3E%3C/svg%3E");}
.pattern-moderate { background-color: #cffafe; background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-1 3h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM-1 1h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1z' fill='%2367e8f9' fill-opacity='0.6'/%3E%3C/svg%3E");}
.pattern-conservative-sub { background-color: #dbeafe; background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h8v2h-8zM0 4h8v2h-8z' fill='%2393c5fd' fill-opacity='0.5'/%3E%3C/svg%3E");}
.pattern-authoritarian { background-color: #e9d5ff; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0L0 8l8 8 8-8z' fill='%23c084fc' fill-opacity='0.4'/%3E%3C/svg%3E");}

/* --- EIXO 3: EXTERNO --- */
.pattern-sovereignty { background-color: #7dd3fc; background-image: linear-gradient(335deg, #0ea5e9 23px, transparent 23px), linear-gradient(155deg, #0ea5e9 23px, transparent 23px); background-size: 58px 58px; }
.pattern-globalization { background-color: #4ade80; background-image: linear-gradient(135deg, #22c55e 25%, transparent 25%); background-size: 30px 30px; }
.pattern-autarchy { background-color: #e5e7eb; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239ca3af' fill-opacity='0.3' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20zM40 40V20L20 40z'/%3E%3C/g%3E%3C/svg%3E");}
.pattern-isolationism { background-color: #dbeafe; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='20' height='20' fill='none' stroke='%2393c5fd' stroke-width='2'/%3E%3C/svg%3E"); background-size: 20px 20px;}
.pattern-nationalism { background-color: #f3e8ff; background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 12L0 2h20L10 12z' fill='%23d8b4fe' fill-opacity='0.4'/%3E%3C/svg%3E");}
.pattern-internationalism { background-color: #ffedd5; background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0l14 14-14 14-14-14z' fill='%23fb923c' fill-opacity='0.3'/%3E%3C/svg%3E");}
.pattern-world-gov { background-color: #dcfce7; background-image: url("data:image/svg+xml,%3Csvg width='44' height='12' viewBox='0 0 44 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12v-2L0 0v2zM44 12v-2L24 0v2z' fill='%2386efac' fill-opacity='0.4'/%3E%3C/svg%3E");}

/* --- EIXO 4: REGRAS / JUSTIÇA --- */
.pattern-rehab { background-color: #c4b5fd; background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #a78bfa 10px); }
.pattern-punish { background-color: #fca5a5; background-image: linear-gradient(45deg, #b91c1c 25%, transparent 25%); background-size: 20px 20px; }
.pattern-restorative { background-color: #e0e7ff; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12c0-3.31 2.69-6 6-6s6 2.69 6 6-2.69 6-6 6-6-2.69-6-6zm0-10c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z' fill='%23a5b4fc' fill-opacity='0.5'/%3E%3C/svg%3E");}
.pattern-reform { background-color: #ede9fe; background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='10' fill='none' stroke='%238b5cf6' stroke-width='1' stroke-opacity='0.2'/%3E%3C/svg%3E");}
.pattern-mixed-justice { background-color: #f3f4f6; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2' fill='%239ca3af'/%3E%3C/svg%3E");}
.pattern-punitivism { background-color: #ffe4e6; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 12L12 0' stroke='%23f43f5e' stroke-width='1' stroke-opacity='0.3'/%3E%3C/svg%3E");}
.pattern-retributive { background-color: #fecaca; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10L10 0 L20 10 L10 20 Z' fill='none' stroke='%23f87171' stroke-width='2'/%3E%3C/svg%3E"); background-size: 20px 20px;}

/* --- EIXO 5: HIERARQUIA / INTENÇÕES --- */
.pattern-hierarchy-main { background-color: #818cf8; background-image: linear-gradient(0deg, #4338ca 25%, transparent 25%, transparent 50%, #4338ca 50%, #4338ca 75%, transparent 75%, transparent); background-size: 20px 20px; }
.pattern-equality-main { background-color: #f472b6; background-image: radial-gradient(#db2777 20%, transparent 20%), radial-gradient(#db2777 20%, transparent 20%); background-position: 0 0, 10px 10px; background-size: 20px 20px; }
.pattern-elitism { background-color: #c7d2fe; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0L20 20H0z' fill='%234f46e5' fill-opacity='0.4'/%3E%3C/svg%3E"); }
.pattern-classism { background-color: #e0e7ff; background-image: url("data:image/svg+xml,%3Csvg width='40' height='10' viewBox='0 0 40 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5h40' stroke='%236366f1' stroke-width='2'/%3E%3C/svg%3E"); }
.pattern-meritocracy { background-color: #f3f4f6; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='8' height='8' fill='%239ca3af' fill-opacity='0.5'/%3E%3C/svg%3E"); }
.pattern-equity { background-color: #fce7f3; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23ec4899' stroke-width='1'/%3E%3C/svg%3E"); }
.pattern-egalitarianism { background-color: #fbcfe8; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4h12v4H0z' fill='%23db2777' fill-opacity='0.4'/%3E%3C/svg%3E"); }

/* =========================================
   8. CONTROLES DE TOPO E ACESSIBILIDADE
   ========================================= */
.top-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}

.lang-selector {
    background-color: var(--card-bg-color);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    gap: 0.5rem;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    font-weight: normal;
}

.lang-btn {
    text-decoration: none;
    color: var(--text-color);
    opacity: 0.6;
    transition: opacity 0.2s;
}

.lang-btn.active {
    opacity: 1;
    text-decoration: underline;
    font-weight: bold;
}

.lang-btn:hover {
    opacity: 1;
}

.accessibility-controls {
    display: flex;
    gap: 0.5rem;
}

.accessibility-controls button {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-weight: normal;
    font-size: 0.9rem;
}

.accessibility-controls button:hover {
    transform: scale(1.1);
}

/* Info Widgets (Botões de O que é...) */
.info-widgets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin: 1.5rem 0;
}

.info-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    color: var(--text-color);
}


/* Cabeçalho da Questão + Select */
.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

#question-select {
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg-color);
    color: var(--text-color);
    max-width: 250px;
    font-family: 'Luciole', sans-serif;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-content {
    background-color: var(--card-bg-color);
    padding: 2rem;
    border-radius: 1rem;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    text-align: center;
    border: 1px solid var(--border-color);
}

/* Footer dentro do card */
footer {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    font-size: 0.85rem;
    opacity: 0.8;
    border-top: 1px solid var(--border-color);
}

/* Links do Rodapé */
footer a {
    color: var(--text-color);
    text-decoration: underline;
    opacity: 0.8;
    transition: opacity 0.2s;
}

footer a:hover {
    opacity: 1;
    color: var(--text-color); /* Ou apenas mantenha a cor do texto */
}

/* --- ESTILOS DO RELATÓRIO --- */
.report-box {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background-color: var(--card-bg-color); /* Contraste sutil dentro do card */
}

.report-box h3 {
    margin-top: 0;
    font-size: 1.1rem;
}

#report-textarea {
    width: 100%;
    height: 120px;
    margin: 0.5rem 0;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg-color);
    color: var(--text-color);
    font-family: monospace;
    font-size: 0.8rem;
    resize: vertical;
}

.report-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.report-actions button {
    font-size: 0.85rem;
    padding: 6px 12px;
}

/* =========================================
   9. CORREÇÕES PARA CELULARES ESTREITOS (RESPONSIVIDADE)
   ========================================= */

@media (max-width: 480px) {
    /* 1. Mudar o comportamento do BODY para permitir rolagem no topo */
    body {
        padding: 1rem 0.5rem;
        justify-content: flex-start; /* Alinha ao topo em vez de centro vertical */
    }

    /* 2. MENU NO TOPO (A correção principal) */
    .top-controls {
        position: static; /* Deixa de ser fixo (flutuante) */
        width: 100%;      /* Ocupa a largura toda */
        justify-content: center; /* Centraliza os botões */
        margin-bottom: 1rem;     /* Empurra o cartão para baixo */
        padding: 0;
    }

    /* 3. Ajustes visuais do menu para caber na tela */
    .lang-selector {
        padding: 0.4rem 0.8rem; /* Botões um pouco menores */
    }
    
    /* 4. Ajustes do Cartão (Mantidos do passo anterior) */
    .quiz-card {
        padding: 1.5rem 1rem;
        border-radius: 1rem;
        margin-top: 0; /* Remove margem extra se houver */
    }

    /* 5. Ajustes dos Gráficos (Mantidos) */
    .graph-content {
        aspect-ratio: 1.4;
        gap: 0.25rem;
    }

    .scale-column {
        width: 18px;
        font-size: 0.6rem;
    }

    .text-overlay {
        font-size: 0.7rem;
        padding: 2px 4px;
        white-space: nowrap;
    }

    .sub-categories .text-label {
        font-size: 0.55rem;
        padding: 1px 3px;
    }

    .graph-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
}