/* ============================================================
   LÓGIKO — Estilos Completos
   Versão 2.0 — com Sobre, Conceito, Lacuna, Associar
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #F0F4FF;
    --card: #FFFFFF;
    --text: #2D3436;
    --muted: #636E72;
    --blue: #0984E3;
    --green: #00B894;
    --red: #FF6B6B;
    --yellow: #FDCB6E;
    --purple: #6C5CE7;
    --grad: linear-gradient(135deg, #667eea, #764ba2);
    --shadow: 0 4px 15px rgba(0,0,0,0.08);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.12);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.18);
    --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ease: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

html { font-size: 18px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* ── SCREENS ── */
.screen { display: none; min-height: 100vh; animation: fadeIn 0.4s ease; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }

/* ── LOADING ── */
#loading-screen { display:flex; align-items:center; justify-content:center; background: var(--grad); color:white; }
.loading-content { text-align:center; padding:2rem; }
.mascot-big { font-size:5rem; animation:bounce 1s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
.game-title { font-size:3.5rem; font-weight:900; margin:.5rem 0 .25rem; letter-spacing:-1px; }
.game-subtitle { font-size:1.2rem; opacity:.9; margin-bottom:2rem; }
.loading-bar { width:250px; height:8px; background:rgba(255,255,255,.3); border-radius:4px; margin:.5rem auto 1rem; overflow:hidden; }
.loading-fill { height:100%; background:white; border-radius:4px; animation:loadProg 2.2s forwards; }
@keyframes loadProg { 0%{width:0} 60%{width:70%} 100%{width:100%} }
.loading-text { font-size:.9rem; opacity:.8; }

/* ── MENU HEADER ── */
.menu-header {
    background: var(--grad); color:white; padding:.9rem 1.5rem;
    display:flex; align-items:center; justify-content:space-between;
    box-shadow:var(--shadow-md); position:sticky; top:0; z-index:100; gap:1rem; flex-wrap:wrap;
}
.header-left { display:flex; align-items:center; gap:.75rem; }
.header-left .mascot { font-size:2rem; }
.header-left h1 { font-size:1.6rem; font-weight:900; line-height:1.1; }
.header-sub { font-size:.7rem; opacity:.8; display:block; font-weight:300; }

/* Nav tabs no header */
.header-nav { display:flex; gap:.5rem; }
.nav-btn {
    background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.3);
    color:white; padding:.4rem 1rem; border-radius:20px; font-size:.9rem;
    font-weight:700; cursor:pointer; transition:var(--ease); font-family:var(--font);
}
.nav-btn:hover, .nav-btn.active { background:rgba(255,255,255,.3); border-color:white; }

.header-right { display:flex; gap:.75rem; }
.score-display {
    display:flex; align-items:center; gap:.3rem;
    background:rgba(255,255,255,.2); padding:.35rem .75rem;
    border-radius:20px; font-weight:700; font-size:.95rem;
}

/* ── WELCOME ── */
.welcome-banner { padding:1.5rem; max-width:900px; margin:0 auto; }
.mascot-speech { display:flex; align-items:flex-start; gap:1rem; }
.speech-mascot { font-size:3rem; flex-shrink:0; animation:float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.speech-bubble {
    background:white; padding:1.2rem 1.5rem; border-radius:var(--r-md);
    box-shadow:var(--shadow); font-size:1rem; line-height:1.6; position:relative;
}
.speech-bubble::before { content:''; position:absolute; left:-12px; top:20px; border:8px solid transparent; border-right-color:white; }

/* ── PROGRESS OVERVIEW ── */
.progress-overview { padding:0 1.5rem 1rem; max-width:900px; margin:0 auto; }
.progress-bar-container { background:white; padding:1rem 1.5rem; border-radius:var(--r-md); box-shadow:var(--shadow); }
.progress-label { font-weight:700; margin-bottom:.5rem; font-size:.9rem; color:var(--muted); }
.progress-bar { height:12px; background:#E8ECF1; border-radius:6px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--green),#00D2A0); border-radius:6px; transition:width .6s ease; }
.progress-text { text-align:right; font-weight:700; font-size:.85rem; color:var(--green); margin-top:.3rem; }

/* ── CHAPTERS GRID ── */
.chapters-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; padding:0 1.5rem 2rem; max-width:900px; margin:0 auto; }
.chapter-card { background:white; border-radius:var(--r-md); padding:1.4rem; cursor:pointer; transition:var(--ease); box-shadow:var(--shadow); border-left:5px solid var(--card-color,#667eea); position:relative; overflow:hidden; }
.chapter-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.chapter-card.locked { opacity:.5; cursor:not-allowed; }
.chapter-card.locked:hover { transform:none; box-shadow:var(--shadow); }
.chapter-card-header { display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; }
.chapter-icon { font-size:2rem; flex-shrink:0; }
.chapter-number { font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.chapter-name { font-size:1rem; font-weight:700; line-height:1.3; }
.chapter-desc { font-size:.82rem; color:var(--muted); line-height:1.5; margin-bottom:.75rem; }
.chapter-meta { display:flex; align-items:center; justify-content:space-between; }
.chapter-levels-count { font-size:.78rem; color:var(--muted); }
.chapter-stars-earned { font-size:.95rem; }
.chapter-progress-mini { height:4px; background:#E8ECF1; border-radius:2px; margin-top:.75rem; overflow:hidden; }
.chapter-progress-mini-fill { height:100%; border-radius:2px; transition:width .4s ease; }
.lock-icon { position:absolute; top:50%; right:1.5rem; transform:translateY(-50%); font-size:1.5rem; opacity:.5; }

/* ── MENU FOOTER ── */
.menu-footer { text-align:center; padding:2rem 1.5rem; color:var(--muted); font-size:.78rem; line-height:1.8; border-top:1px solid #E8ECF1; max-width:900px; margin:1rem auto 0; }

/* ══════════════════════════════════════════
   TELA SOBRE
══════════════════════════════════════════ */
.sobre-container { max-width:900px; margin:0 auto; padding:1.5rem; }

.sobre-tabs {
    display:flex; gap:.4rem; flex-wrap:wrap;
    border-bottom:2px solid #E8ECF1; padding-bottom:-.1rem; margin-bottom:1.5rem;
}
.sobre-tab {
    background:none; border:none; padding:.6rem 1rem; font-size:.85rem; font-weight:600;
    color:var(--muted); cursor:pointer; border-bottom:3px solid transparent;
    margin-bottom:-2px; transition:var(--ease); font-family:var(--font); border-radius:4px 4px 0 0;
}
.sobre-tab:hover { color:var(--blue); background:#F0F6FF; }
.sobre-tab.active { color:var(--blue); border-bottom-color:var(--blue); }

.sobre-content { display:none; animation:fadeIn .3s ease; }
.sobre-content.active { display:block; }
.sobre-content h2 { font-size:1.4rem; font-weight:800; margin-bottom:1.2rem; color:var(--text); }
.sobre-content h3 { font-size:1.1rem; font-weight:700; margin:1.5rem 0 .75rem; color:var(--text); }
.sobre-content p { font-size:.95rem; line-height:1.7; color:var(--muted); margin-bottom:.75rem; }

/* Info card */
.info-card { background:white; border-radius:var(--r-md); box-shadow:var(--shadow); overflow:hidden; margin-bottom:1.5rem; }
.info-row { display:flex; align-items:flex-start; padding:.9rem 1.2rem; border-bottom:1px solid #F0F4FF; gap:1rem; }
.info-row:last-child { border-bottom:none; }
.info-label { font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; min-width:160px; flex-shrink:0; padding-top:.1rem; }
.info-value { font-size:.95rem; color:var(--text); }

/* Needs grid */
.needs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-bottom:1rem; }
.need-card { background:white; border-radius:var(--r-md); padding:1.2rem; box-shadow:var(--shadow); }
.need-icon { font-size:1.8rem; display:block; margin-bottom:.5rem; }
.need-card strong { display:block; margin-bottom:.3rem; font-size:.95rem; }
.need-card p { font-size:.82rem; color:var(--muted); line-height:1.5; margin:0; }

/* Architecture */
.arch-diagram { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.arch-box { background:white; border-radius:var(--r-md); padding:1rem 1.2rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.2rem; flex:1; min-width:150px; }
.arch-box strong { font-size:.95rem; margin-bottom:.2rem; }
.arch-box span { font-size:.75rem; color:var(--muted); }
.arch-box.frontend { border-top:4px solid var(--blue); }
.arch-box.backend { border-top:4px solid var(--purple); }
.arch-box.infra { border-top:4px solid var(--green); }
.arch-arrow { font-size:1.2rem; color:var(--muted); flex-shrink:0; }

/* Resources */
.resources-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; margin-bottom:1rem; }
.resource-item { background:white; border-radius:var(--r-md); padding:1rem; box-shadow:var(--shadow); display:flex; gap:.75rem; }
.resource-icon { font-size:1.8rem; flex-shrink:0; }
.resource-item strong { display:block; font-size:.9rem; margin-bottom:.2rem; }
.resource-item p { font-size:.8rem; color:var(--muted); line-height:1.5; margin:0; }

/* Code concepts pills */
.code-concepts { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem; }
.concept-pill { background:linear-gradient(135deg,#EBF5FB,#F0F6FF); border:1px solid #C3D9F0; padding:.3rem .8rem; border-radius:20px; font-size:.8rem; font-weight:600; color:var(--blue); }
.sobre-content code { background:#F0F4FF; padding:.15rem .4rem; border-radius:4px; font-size:.85rem; font-family:monospace; }

/* Design palette */
.design-palette { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.color-swatch { width:100px; min-height:80px; border-radius:var(--r-sm); padding:.6rem; display:flex; flex-direction:column; justify-content:flex-end; gap:.2rem; color:white; box-shadow:var(--shadow); }
.color-swatch span { font-size:.75rem; font-weight:700; }
.color-swatch small { font-size:.65rem; opacity:.85; }

/* A11y list */
.a11y-list { display:flex; flex-direction:column; gap:.75rem; margin-bottom:1rem; }
.a11y-item { background:white; border-radius:var(--r-md); padding:1rem 1.2rem; box-shadow:var(--shadow); display:flex; gap:.75rem; align-items:flex-start; }
.a11y-icon { font-size:1.5rem; flex-shrink:0; }
.a11y-item strong { display:block; font-size:.9rem; margin-bottom:.2rem; }
.a11y-item p { font-size:.82rem; color:var(--muted); line-height:1.5; margin:0; }

/* Feedback grid (gamificação) */
.feedback-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.feedback-item { background:white; border-radius:var(--r-md); padding:1.2rem; box-shadow:var(--shadow); }
.feedback-item strong { display:block; margin-bottom:.5rem; font-size:.95rem; }
.feedback-item p { font-size:.82rem; color:var(--muted); line-height:1.5; margin:0; }
.correct-style { border-top:4px solid var(--green); }
.wrong-style { border-top:4px solid var(--red); }
.concept-style { border-top:4px solid var(--yellow); }
.level-style { border-top:4px solid var(--purple); }

/* Mechanics table */
.mechanics-table { background:white; border-radius:var(--r-md); box-shadow:var(--shadow); overflow:hidden; margin-bottom:1.5rem; }
.mech-row { display:grid; grid-template-columns:1fr 2fr 2fr; gap:1rem; padding:.75rem 1rem; border-bottom:1px solid #F0F4FF; font-size:.82rem; }
.mech-row:last-child { border-bottom:none; }
.mech-row.header-row { background:var(--grad); color:white; font-weight:700; font-size:.8rem; }

/* Pedagogy grid */
.pedagogy-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.pedagogy-item { background:white; border-radius:var(--r-md); padding:1.2rem; box-shadow:var(--shadow); }
.ped-icon { font-size:1.8rem; display:block; margin-bottom:.5rem; }
.pedagogy-item strong { display:block; font-size:.9rem; margin-bottom:.3rem; }
.pedagogy-item p { font-size:.8rem; color:var(--muted); line-height:1.5; margin:0; }

/* Competitors */
.competitors-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.competitor-card { background:white; border-radius:var(--r-md); padding:1.2rem; box-shadow:var(--shadow); }
.comp-header { display:flex; gap:.75rem; align-items:center; margin-bottom:.75rem; }
.comp-icon { font-size:2rem; }
.comp-header strong { display:block; font-size:.95rem; }
.comp-tag { font-size:.72rem; color:var(--muted); background:#F0F4FF; padding:.2rem .5rem; border-radius:10px; }
.competitor-card p { font-size:.82rem; color:var(--muted); line-height:1.5; margin-bottom:.4rem; }
.competitor-card p strong { color:var(--text); font-size:.82rem; }

.differential-box { background:linear-gradient(135deg,#F0FFF4,#E8F5E9); border:2px solid var(--green); border-radius:var(--r-md); padding:1.5rem; }
.differential-box h3 { margin-top:0; color:var(--green); }
.differential-list { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.differential-list li { font-size:.9rem; color:var(--text); line-height:1.6; padding-left:1.2rem; position:relative; }
.differential-list li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:900; }

/* Tutorial */
.tutorial-steps { display:flex; flex-direction:column; gap:1.5rem; margin-bottom:1.5rem; }
.tutorial-step { display:flex; gap:1rem; align-items:flex-start; }
.step-number { width:36px; height:36px; border-radius:50%; background:var(--grad); color:white; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1rem; flex-shrink:0; box-shadow:var(--shadow); }
.step-content { flex:1; background:white; border-radius:var(--r-md); padding:1.2rem; box-shadow:var(--shadow); }
.step-content strong { display:block; font-size:1rem; margin-bottom:.5rem; }

/* Screen mockups */
.screen-mockup { background:#F8F9FF; border:2px solid #DFE6E9; border-radius:var(--r-sm); overflow:hidden; margin:.75rem 0; }
.mock-header { background:var(--grad); color:white; padding:.5rem 1rem; font-size:.8rem; font-weight:700; display:flex; justify-content:space-between; }
.mock-body { padding:.75rem; display:flex; flex-direction:column; gap:.4rem; }
.mock-card { padding:.5rem .75rem; border-radius:8px; font-size:.8rem; font-weight:600; }
.mock-card.unlocked { background:#EBF5FB; color:var(--blue); }
.mock-card.locked { background:#F0F4FF; color:var(--muted); }
.mock-level { padding:.5rem .75rem; border-radius:8px; font-size:.8rem; font-weight:600; }
.mock-level.done { background:#E6FFF2; color:var(--green); }
.mock-level.active { background:#EBF5FB; color:var(--blue); }
.mock-level.locked { background:#F0F4FF; color:var(--muted); }
.concept-mock .mock-concept-title { background:linear-gradient(135deg,#FFF9E6,#FFF3CD); padding:.75rem 1rem; font-weight:700; font-size:.85rem; }
.concept-mock .mock-concept-body { padding:.75rem 1rem; font-size:.8rem; }
.mock-example { background:#F0F4FF; padding:.3rem .6rem; border-radius:6px; margin:.3rem 0; font-size:.75rem; }
.mock-btn { background:var(--grad); color:white; padding:.5rem 1rem; border-radius:20px; font-size:.8rem; font-weight:700; text-align:center; margin:.5rem 1rem; }
.fig-caption { font-size:.75rem; color:var(--muted); font-style:italic; margin-top:.4rem; }
.activity-types-preview { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; }
.act-type { padding:.4rem .8rem; border-radius:20px; font-size:.8rem; font-weight:600; background:white; border:2px solid #DFE6E9; }
.tip-box { background:linear-gradient(135deg,#F0F6FF,#EBF5FB); border:2px solid #C3D9F0; border-radius:var(--r-md); padding:1.2rem 1.5rem; }
.tip-box strong { display:block; margin-bottom:.5rem; color:var(--blue); }
.tip-box p { font-size:.9rem; margin-bottom:.4rem; }

/* References */
.references-list { display:flex; flex-direction:column; gap:.75rem; }
.ref-item { background:white; border-radius:var(--r-sm); padding:1rem 1.2rem; box-shadow:var(--shadow); border-left:4px solid var(--blue); }
.ref-item p { font-size:.85rem; color:var(--text); line-height:1.7; margin:0; }

/* ══════════════════════════════════════════
   GAME HEADER (nível e jogo)
══════════════════════════════════════════ */
.game-header { background:white; padding:.8rem 1.2rem; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow); position:sticky; top:0; z-index:100; }
.btn-back { background:none; border:2px solid #DFE6E9; padding:.4rem 1rem; border-radius:20px; font-size:.9rem; font-weight:600; cursor:pointer; color:var(--text); transition:var(--ease); }
.btn-back:hover { background:#F0F4FF; border-color:var(--blue); color:var(--blue); }
.game-header h2 { font-size:1.05rem; font-weight:700; flex:1; text-align:center; margin:0 .75rem; }
.header-scores, .game-stats { display:flex; gap:.75rem; font-weight:700; font-size:.9rem; }
.game-stat { display:flex; align-items:center; gap:.2rem; }

/* ── LEVEL SELECT ── */
.chapter-intro { text-align:center; padding:2rem 1.5rem 1rem; max-width:600px; margin:0 auto; }
.chapter-icon-big { font-size:4rem; margin-bottom:.5rem; }
.chapter-desc-text { font-size:.95rem; color:var(--muted); line-height:1.6; }
.levels-list { max-width:600px; margin:0 auto; padding:1rem 1.5rem 2rem; display:flex; flex-direction:column; gap:.75rem; }
.level-card { background:white; border-radius:var(--r-md); padding:1.2rem 1.5rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:var(--ease); box-shadow:var(--shadow); border:2px solid transparent; }
.level-card:hover { border-color:var(--blue); transform:translateX(4px); box-shadow:var(--shadow-md); }
.level-card.locked { opacity:.45; cursor:not-allowed; }
.level-card.locked:hover { border-color:transparent; transform:none; box-shadow:var(--shadow); }
.level-card.completed { border-color:var(--green); background:#F0FFF4; }
.level-left { display:flex; align-items:center; gap:1rem; }
.level-number { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1rem; color:white; flex-shrink:0; }
.level-name { font-weight:600; font-size:1rem; }
.level-stars { display:flex; gap:3px; font-size:1.1rem; }
.star-empty { opacity:.2; }

/* ── GAME PROGRESS BAR ── */
.game-progress { padding:.9rem 1.5rem .3rem; max-width:700px; margin:0 auto; }
.game-progress-bar { height:10px; background:#E8ECF1; border-radius:5px; overflow:hidden; }
.game-progress-fill { height:100%; background:linear-gradient(90deg,var(--blue),var(--purple)); border-radius:5px; transition:width .4s ease; }
.question-counter { text-align:center; font-size:.82rem; color:var(--muted); font-weight:600; margin-top:.3rem; }

/* ── QUESTION AREA ── */
.question-area { max-width:700px; margin:0 auto; padding:1rem 1.5rem 2rem; }

/* Question card */
.question-card { background:white; border-radius:var(--r-lg); padding:2rem; box-shadow:var(--shadow-md); margin-bottom:1.5rem; animation:slideUp .4s ease; }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.question-type-badge { display:inline-block; padding:.25rem .75rem; border-radius:20px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.75rem; background:#EBF5FB; color:var(--blue); }
.question-text { font-size:1.1rem; line-height:1.7; font-weight:500; white-space:pre-line; }
.hidden { display:none !important; }

/* ── CONCEITO CARD ── */
.conceito-card {
    background:linear-gradient(135deg,#FFF9E6,#FFF3CD);
    border:2px solid #F0C040; border-radius:var(--r-lg);
    padding:2rem; box-shadow:var(--shadow-md); margin-bottom:1.5rem;
    animation:slideUp .4s ease;
}
.conceito-header { margin-bottom:1rem; }
.conceito-badge { display:inline-block; background:#F0C040; color:#5D4037; padding:.25rem .75rem; border-radius:20px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.6rem; }
.conceito-header h3 { font-size:1.3rem; font-weight:800; color:#3D2E0A; }
.conceito-conteudo { font-size:1rem; line-height:1.8; color:#5D4037; white-space:pre-line; margin-bottom:1.2rem; }
.conceito-exemplos { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.conceito-exemplo { background:white; border-radius:8px; padding:.6rem 1rem; font-size:.9rem; border-left:3px solid #F0C040; }
.conceito-dica { background:rgba(255,255,255,.6); border-radius:8px; padding:.75rem 1rem; font-size:.85rem; color:#7B5E00; font-style:italic; margin-bottom:1.5rem; border:1px dashed #F0C040; }
.conceito-btn { width:100%; }

/* ── OPÇÕES ── */
.options-area { display:flex; flex-direction:column; gap:.75rem; animation:slideUp .5s ease; }
.option-btn {
    background:white; border:3px solid #E8ECF1; border-radius:var(--r-md);
    padding:1.1rem 1.4rem; font-size:1rem; font-weight:500; cursor:pointer;
    transition:var(--ease); text-align:left; display:flex; align-items:center;
    gap:1rem; line-height:1.5; font-family:var(--font); color:var(--text);
}
.option-btn:hover { border-color:var(--blue); background:#F0F6FF; transform:translateX(4px); }
.option-letter { width:34px; height:34px; border-radius:50%; background:#F0F4FF; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:var(--blue); flex-shrink:0; transition:var(--ease); }
.option-btn:hover .option-letter { background:var(--blue); color:white; }
.option-btn.correct { border-color:var(--green); background:#E6FFF2; }
.option-btn.correct .option-letter { background:var(--green); color:white; }
.option-btn.wrong { border-color:var(--red); background:#FFF0F0; animation:shake .4s ease; }
.option-btn.wrong .option-letter { background:var(--red); color:white; }
.option-btn.disabled { pointer-events:none; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

/* V/F */
.vf-options { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.vf-btn { padding:1.8rem; font-size:1.2rem; font-weight:800; justify-content:center; flex-direction:column; align-items:center; gap:.4rem; }
.vf-btn.vf-true:hover { background:#E6FFF2; border-color:var(--green); }
.vf-btn.vf-false:hover { background:#FFF0F0; border-color:var(--red); }

/* ── LACUNA (fill-in-blank) ── */
.lacuna-sentence { font-size:1.1rem; line-height:2; margin-bottom:1rem; font-weight:500; }
.lacuna-blank {
    display:inline-block; min-width:120px; padding:.2rem .6rem;
    border-bottom:3px solid var(--blue); background:#EBF5FB;
    border-radius:4px; text-align:center; font-weight:700; color:var(--blue);
    vertical-align:middle; cursor:default;
}
.word-bank { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.word-chip {
    background:white; border:2px solid #DFE6E9; border-radius:20px;
    padding:.4rem 1rem; font-size:.95rem; font-weight:600; cursor:pointer;
    transition:var(--ease); color:var(--text);
}
.word-chip:hover { border-color:var(--blue); background:#EBF5FB; color:var(--blue); }
.word-chip.selected { background:var(--blue); color:white; border-color:var(--blue); }
.word-chip.correct { background:var(--green); color:white; border-color:var(--green); pointer-events:none; }
.word-chip.wrong { background:var(--red); color:white; border-color:var(--red); pointer-events:none; animation:shake .4s ease; }
.word-chip.disabled { pointer-events:none; opacity:.5; }

/* ── ASSOCIAR (matching pairs) ── */
.associar-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.assoc-col { display:flex; flex-direction:column; gap:.5rem; }
.assoc-col-label { font-size:.75rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; text-align:center; margin-bottom:.2rem; }
.assoc-item {
    background:white; border:2px solid #DFE6E9; border-radius:var(--r-sm);
    padding:.7rem 1rem; font-size:.9rem; font-weight:500; cursor:pointer;
    transition:var(--ease); text-align:center; min-height:44px; display:flex; align-items:center; justify-content:center;
}
.assoc-item:hover { border-color:var(--blue); background:#EBF5FB; }
.assoc-item.selected { border-color:var(--blue); background:var(--blue); color:white; }
.assoc-item.matched-correct { border-color:var(--green); background:#E6FFF2; color:var(--green); pointer-events:none; }
.assoc-item.matched-wrong { border-color:var(--red); background:#FFF0F0; animation:shake .4s ease; }
.assoc-item.disabled { pointer-events:none; opacity:.5; }
.assoc-check-btn { margin-top:.75rem; }

/* ── FEEDBACK OVERLAY ── */
.feedback-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1.5rem; animation:fadeIn .3s ease; backdrop-filter:blur(4px); }
.feedback-card { background:white; border-radius:var(--r-xl); padding:2.5rem; max-width:500px; width:100%; text-align:center; box-shadow:var(--shadow-lg); animation:popIn .4s cubic-bezier(.175,.885,.32,1.275); }
@keyframes popIn { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
.feedback-icon { font-size:3.5rem; margin-bottom:.5rem; }
.feedback-card h3 { font-size:1.4rem; margin-bottom:.75rem; }
.feedback-card.correct h3 { color:var(--green); }
.feedback-card.wrong h3 { color:var(--red); }
.feedback-explanation { font-size:.95rem; line-height:1.7; color:var(--muted); margin-bottom:1rem; text-align:left; background:#F8F9FA; padding:1rem 1.2rem; border-radius:var(--r-sm); border-left:4px solid var(--blue); }
.feedback-points { font-size:1.1rem; font-weight:800; margin-bottom:1.5rem; }
.feedback-points.positive { color:var(--green); }
.feedback-points.negative { color:var(--red); }

/* ── BUTTONS ── */
.btn-primary { background:var(--grad); color:white; border:none; padding:.8rem 2rem; border-radius:30px; font-size:1rem; font-weight:700; cursor:pointer; transition:var(--ease); font-family:var(--font); box-shadow:0 4px 15px rgba(9,132,227,.25); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(9,132,227,.35); }
.btn-secondary { background:white; color:var(--text); border:2px solid #DFE6E9; padding:.8rem 2rem; border-radius:30px; font-size:1rem; font-weight:700; cursor:pointer; transition:var(--ease); font-family:var(--font); }
.btn-secondary:hover { border-color:var(--blue); color:var(--blue); }
.btn-outline { background:transparent; color:var(--muted); border:2px solid #DFE6E9; padding:.8rem 2rem; border-radius:30px; font-size:.95rem; font-weight:600; cursor:pointer; transition:var(--ease); font-family:var(--font); }
.btn-outline:hover { border-color:var(--muted); }
.btn-large { padding:1rem 2.5rem; font-size:1.05rem; }

/* ── RESULT ── */
#result-screen { display:none; align-items:center; justify-content:center; background:linear-gradient(135deg,#F0F4FF,#E8DFFF); }
#result-screen.active { display:flex; }
.result-content { text-align:center; padding:2rem; max-width:500px; animation:popIn .6s ease; }
.result-stars { font-size:3.5rem; margin-bottom:1rem; letter-spacing:8px; }
.result-content h2 { font-size:2rem; margin-bottom:.5rem; }
.result-message { font-size:1rem; color:var(--muted); margin-bottom:2rem; line-height:1.6; }
.result-stats { display:flex; justify-content:center; gap:2rem; margin-bottom:2rem; }
.result-stat { display:flex; flex-direction:column; align-items:center; }
.result-stat-value { font-size:2rem; font-weight:900; color:var(--blue); }
.result-stat-label { font-size:.75rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.result-buttons { display:flex; flex-direction:column; gap:.75rem; align-items:center; }

/* ── CONFETTI ── */
#confetti-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999; }

/* ── RESPONSIVE ── */
@media (max-width:600px) {
    html { font-size:16px; }
    .menu-header { padding:.8rem 1rem; }
    .header-left h1 { font-size:1.3rem; }
    .header-nav { order:3; width:100%; justify-content:center; }
    .chapters-grid, .welcome-banner, .progress-overview { padding-left:1rem; padding-right:1rem; }
    .chapters-grid { grid-template-columns:1fr; }
    .question-card, .conceito-card { padding:1.5rem; }
    .vf-options { grid-template-columns:1fr; }
    .associar-grid { grid-template-columns:1fr; }
    .mech-row { grid-template-columns:1fr 1fr; font-size:.75rem; }
    .mech-row.header-row { display:none; }
    .arch-diagram { flex-direction:column; }
    .arch-arrow { transform:rotate(90deg); }
    .sobre-tabs { gap:.25rem; }
    .sobre-tab { padding:.5rem .6rem; font-size:.75rem; }
    .result-stats { gap:1rem; }
    .result-stat-value { font-size:1.5rem; }
    .score-display { padding:.3rem .5rem; font-size:.82rem; }
}
@media (min-width:1200px) {
    .chapters-grid { grid-template-columns:repeat(3,1fr); max-width:1100px; }
}

/* ── ACCESSIBILITY ── */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
:focus-visible { outline:3px solid var(--blue); outline-offset:2px; border-radius:4px; }