/* Shared styles for Santi's 3rd grade English prep — kid-friendly */
:root { --ink:#1a1530; --soft:#555; --muted:#7b7397; --rule:#eae6f3; --bg:#fdfbff; --accent:#7d4dff; --warn:#ff5577; --good:#23b06a; --gold:#ffb43d; --sky:#56b6ff; --pink:#ff7fb6; }
* { box-sizing:border-box }
body { font-family:'Fredoka',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); margin:0; line-height:1.55; }
.wrap { max-width:920px; margin:0 auto; padding:24px; }
header { background:linear-gradient(135deg,var(--accent),var(--sky) 80%); color:#fff; padding:24px 0; }
header .wrap { padding-top:0; padding-bottom:0; }
header a { color:#fff; opacity:.85; text-decoration:none; font-weight:600; }
header a:hover { opacity:1; }
h1 { font-size:32px; margin:0 0 4px; letter-spacing:-0.02em; font-weight:800; }
header p { margin:0; opacity:.95; font-size:16px; }
h2 { font-size:24px; margin:30px 0 12px; padding-bottom:8px; border-bottom:3px solid var(--accent); display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; font-weight:700; }
h3 { font-size:19px; margin:22px 0 10px; font-weight:700; color:var(--accent); }
.lesson { background:#fff; border:2px solid var(--rule); border-radius:14px; padding:20px 24px; margin:14px 0; }
.lesson .rule { background:#f6f3ff; border-left:5px solid var(--accent); padding:14px 18px; border-radius:0 10px 10px 0; margin:10px 0; }
.lesson .rule strong { color:var(--accent); }
.lesson .examples { background:#f9faff; border-radius:10px; padding:12px 18px; margin:10px 0; }
.lesson .examples li { padding:5px 0; }
.lesson .tip { background:#fff8e1; border:2px dashed var(--gold); border-radius:10px; padding:12px 16px; margin:10px 0; font-size:15px; }
.lesson .tip::before { content:'💡 '; }

.quiz { background:#fff; border:2px solid var(--rule); border-radius:14px; padding:20px 24px; margin:14px 0; }
.quiz .q { margin:18px 0; padding:14px 0; border-top:1px solid var(--rule); }
.quiz .q:first-of-type { border-top:none; }
.quiz .qtext { font-size:17px; font-weight:600; margin-bottom:10px; }
.quiz .qtext .num { display:inline-block; background:var(--accent); color:#fff; width:28px; height:28px; border-radius:50%; text-align:center; line-height:28px; font-size:14px; margin-right:8px; font-weight:800; }
.quiz .opts { display:flex; flex-direction:column; gap:8px; }
.quiz .opt { display:block; padding:12px 18px; background:#f6f3ff; border:2px solid transparent; border-radius:10px; cursor:pointer; font-size:16px; transition:all .15s; user-select:none; }
.quiz .opt:hover { background:#ebe4ff; transform:translateX(4px); }
.quiz .opt.right { background:#d6f3e0; border-color:var(--good); color:#0a5a2f; font-weight:700; }
.quiz .opt.right::after { content:' ✓'; font-weight:900; }
.quiz .opt.wrong { background:#ffd5d5; border-color:var(--warn); color:#6b0000; }
.quiz .opt.wrong::after { content:' ✗'; font-weight:900; }
.quiz .opt.disabled { cursor:default; }
.quiz .feedback { font-size:14px; color:var(--good); font-weight:700; margin-top:8px; padding:8px 12px; background:#eafaf0; border-radius:8px; display:none; }
.quiz .feedback.wrong { color:#a00; background:#fdeaea; }
.quiz .feedback.show { display:block; }
.quiz .fillblank { font-size:17px; line-height:2.2; }
.quiz .fillblank input { font-family:inherit; font-size:16px; padding:6px 10px; border:2px solid var(--rule); border-radius:8px; width:130px; text-align:center; }
.quiz .fillblank input.right { background:#d6f3e0; border-color:var(--good); }
.quiz .fillblank input.wrong { background:#ffd5d5; border-color:var(--warn); }
.quiz .check-btn { background:var(--accent); color:#fff; border:none; padding:10px 22px; border-radius:999px; font-size:15px; font-weight:700; cursor:pointer; margin-top:6px; }
.quiz .check-btn:hover { background:#6b3eff; }

.match-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
.match-item { padding:14px 18px; background:#f6f3ff; border:2px solid var(--rule); border-radius:10px; cursor:pointer; font-size:16px; text-align:center; user-select:none; transition:all .15s; }
.match-item:hover { border-color:var(--accent); transform:translateY(-2px); }
.match-item.selected { background:var(--accent); color:#fff; border-color:var(--accent); }
.match-item.matched { background:#d6f3e0; color:#0a5a2f; border-color:var(--good); cursor:default; pointer-events:none; opacity:.7; }

.score-display { background:linear-gradient(135deg,var(--accent),var(--sky)); color:#fff; border-radius:14px; padding:22px 26px; margin:20px 0; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.score-display .score-text { font-size:18px; font-weight:600; }
.score-display .score-num { font-size:32px; font-weight:900; }

.vocab-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:16px 0; }
.vocab-card { background:#fff; border:2px solid var(--rule); border-radius:14px; padding:16px 12px; text-align:center; transition:transform .15s; }
.vocab-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 6px 16px rgba(125,77,255,.1); }
.vocab-card .emoji { font-size:42px; display:block; margin-bottom:6px; }
.vocab-card .word { font-weight:700; font-size:17px; color:var(--accent); }
.vocab-card .meaning { font-size:13px; color:var(--muted); margin-top:3px; }
.vocab-card .es { display:inline-block; background:#fff8e1; color:#7a5a00; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; margin-top:6px; }
.vocab-card .es::before { content:'🇨🇷 '; font-size:11px; }

.glossary { background:#fff8e1; border:2px dashed var(--gold); border-radius:10px; padding:14px 18px; margin:14px 0; font-size:14px; }
.glossary strong { color:#7a5a00; }
.glossary table { width:100%; border-collapse:collapse; margin-top:8px; }
.glossary td { padding:4px 8px; border-bottom:1px solid rgba(0,0,0,.06); }
.glossary td:first-child { font-weight:700; color:var(--accent); width:40%; }

.es-hint { background:#fff8e1; color:#7a5a00; padding:1px 7px; border-radius:6px; font-size:13px; font-weight:700; }
.es-hint::before { content:'🇨🇷 '; }

.back-link { display:inline-block; margin:10px 0; color:var(--accent); text-decoration:none; font-weight:600; font-size:14px; }
.back-link:hover { text-decoration:underline; }

footer { color:var(--muted); font-size:13px; margin-top:48px; padding-top:18px; border-top:1px solid var(--rule); text-align:center; }