/* Camino de las letras (1.º): copiar oraciones, escribir sin modelo, ortografía y dibujos de píxeles. */
.pl-dots{text-align:center;font-size:26px;letter-spacing:4px;color:#2b579a;margin:0 0 10px}
.or-say,.dc-spy{display:inline-grid;place-items:center;width:62px;height:62px;border:3px solid #bfdbfe;border-radius:18px;background:#eff6ff;font-size:32px;box-shadow:0 5px 0 #93c5fd}
.or-say:active,.dc-spy:active{translate:0 4px;box-shadow:0 1px 0 #93c5fd}

/* Copiá la oración */
.or-model{display:flex;align-items:center;gap:16px;max-width:980px;margin:0 auto 14px;padding:14px 20px;border:5px solid #f5c638;border-radius:24px;background:#fffbe8;box-shadow:0 7px 0 #e5a62333}
.or-pic{font-size:62px;flex:none}.or-pic .art{width:1.1em;height:1.1em}
.or-text{flex:1;font-size:clamp(28px,4.4vw,50px);font-weight:900;letter-spacing:.06em;line-height:1.25;color:#1f2a44}
.or-done{color:#16a34a}
.or-paper{max-width:980px;margin:0 auto;min-height:150px;padding:18px 24px;border:4px solid #1f2a44;border-radius:18px;background:#fff;box-shadow:0 8px 0 #1f2a4422}
.or-line{display:flex;flex-wrap:wrap;align-items:center;row-gap:10px;font-size:clamp(28px,4.4vw,50px);font-weight:900;line-height:1.3}
.or-line .ch{width:auto;min-width:.55em}.or-line .ch.sp{min-width:.6em;border-bottom-color:transparent}
.or-line.complete .ch.ok{color:#15803d;border-bottom-color:#22c55e}

/* Escribí lo que ves */
.dc-pic{display:table;margin:0 auto 6px;padding:6px 22px;font-size:96px;line-height:1.15;border:5px solid #ffc84c;border-radius:28px;background:#fff;box-shadow:0 7px 0 #e5a62333}
.dc-pic .art{width:1.1em;height:1.1em}
.dc-tools{display:flex;justify-content:center;gap:12px;margin:10px 0}
.dc-peek{text-align:center;font-size:44px;font-weight:900;letter-spacing:.12em;color:#7c3aed}
.dc-boxes{display:grid;grid-template-columns:repeat(var(--n),minmax(0,86px));justify-content:center;gap:10px;margin:14px auto 0;max-width:980px}
.dc-box{display:grid;place-items:center;aspect-ratio:1/1.15;border:4px solid #94a3b8;border-bottom-width:9px;border-radius:16px;background:#fff;font-size:clamp(30px,5vw,56px);font-weight:900;color:#1f2a44}
.dc-box.now{border-color:#2b579a;animation:doc-next 1s ease-in-out infinite}
.dc-box.ok{border-color:#22c55e;background:#dcfce7;color:#15803d}
.dc-box.bad{border-color:#dc2626;background:#fee2e2;color:#b91c1c}
.dc-boxes.complete .dc-box{animation:happy-hop .4s ease-out}

/* Copiá el dibujo */
.px-wrap{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.px-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;width:min(40vw,360px);aspect-ratio:1;padding:6px;border-radius:16px;background:#cbd5e1}
.px-model{width:min(30vw,270px)}
.px{display:block;aspect-ratio:1;border-radius:5px;background:#fff;position:relative}
.px-canvas{touch-action:none;cursor:crosshair;background:#1f2a44}
.px-canvas .px.bad::after{content:'✗';position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(14px,2.4vw,28px);font-weight:900;color:#dc2626;background:#fee2e2cc;border-radius:5px}
.px-canvas.complete{outline:6px solid #22c55e;animation:happy-hop .4s ease-out}
.px-arrow{font-size:46px;font-weight:900;color:#64748b}
.px-palette{display:flex;justify-content:center;gap:12px;margin:16px 0 4px}
.px-color{width:70px;height:70px;border:5px solid #fff;border-radius:50%;box-shadow:0 5px 0 #0003;font-size:30px}
.px-color.goma{background:linear-gradient(45deg,#fff 44%,#ef4444 44% 56%,#fff 56%);border-color:#cbd5e1}
.px-color.selected{outline:6px solid #1f2a44;outline-offset:3px;scale:1.1}
.px-ok,.ar-ok{display:block;margin:12px auto 0;min-width:120px}
.px-ok:disabled,.ar-ok:disabled{opacity:.4}

/* ¿Cuál está bien escrita?, La letra que falta y Detective de letras */
.orto{text-align:center}
.orto .or-say{margin:6px 0}
.orto-opts{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:14px}
.orto-word{min-width:220px;padding:10px 22px;font-size:clamp(30px,4.6vw,48px);font-weight:900;letter-spacing:.06em}
.tile.wrong{background:#fee2e2;border-color:#f87171;box-shadow:0 7px 0 #dc262655;color:#b91c1c;text-decoration:line-through 5px;animation:shake-no .35s}
.tile.wrong:disabled{opacity:1}
.cf-word{font-size:clamp(40px,7vw,72px);font-weight:900;letter-spacing:.1em;margin:8px 0}
.cf-gap{display:inline-grid;place-items:center;min-width:1.1em;margin:0 .08em;padding:0 .1em;border:5px dashed #7c3aed;border-radius:16px;color:#7c3aed;background:#f5f3ff}
.cf-gap.ok{border-style:solid;border-color:#22c55e;color:#15803d;background:#dcfce7}
.cf-letter{min-width:130px;font-size:clamp(40px,6vw,62px);font-weight:900}
.det-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:900px}
.det-word{min-height:84px;font-size:clamp(20px,2.8vw,32px);font-weight:900;letter-spacing:.04em;padding:6px}
@keyframes shake-no{25%{translate:-8px 0}75%{translate:8px 0}}

/* Memoria de palabras */
#stage[data-game=memoria] .tile.pal.revealed{font-size:clamp(20px,3vw,34px);font-weight:900;letter-spacing:.04em}

/* Armá la oración */
.ar-slots{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:12px;margin:16px auto;max-width:1000px}
.ar-hole{display:grid;place-items:center;min-width:130px;min-height:92px;border:4px dashed #94a3b8;border-radius:22px;background:#f8fafc}
.ar-hole:has(.tile){border-color:transparent;background:none}
.ar-hole.fixed .tile{cursor:default}
.ar-dot{font-size:60px;font-weight:900;line-height:1}
.ar-bank{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;min-height:100px}
.ar-word{min-width:120px;min-height:84px;padding:6px 16px;font-size:clamp(24px,3.6vw,38px);font-weight:900;letter-spacing:.04em}

/* Sapito lector */
.sp-word{font-size:clamp(24px,3.4vw,34px);letter-spacing:.08em}

/* Panel del profe en el mapa: terminar la actividad */
.camino-libre{margin:14px 0;padding:14px;border-radius:18px;background:#fff7d6;border:3px solid #f5c638}
.camino-libre h3{margin:0 0 6px}.camino-libre p{margin:0 0 10px}
.camino-libre-cursos{display:flex;flex-wrap:wrap;gap:10px}
.camino-libre-btn{padding:12px 18px;border:3px solid #1f2a44;border-radius:16px;background:#fff;font-size:20px;font-weight:900}
.camino-libre-btn.sug{box-shadow:0 0 0 4px #22c55e}
.camino-libre-btn.libre{background:#dcfce7;border-color:#15803d}
@media(max-width:650px){.px-grid{width:min(80vw,340px)}.px-model{width:min(56vw,240px)}.px-arrow{rotate:90deg}.dc-pic{font-size:72px}.ar-hole{min-width:96px}}