/* ===== Escuela Mía — estilos (tablet primero) ===== */
:root {
  --ink: #2b2140; --ink2: #5d5476; --paper: #fffdf8; --line: #e9e2f5;
  --sky1: #e8f4ff; --sky2: #fdf3ff;
  --acc: #7a5af5; --acc2: #a58bff; --soft: #f1ecff;
  --good: #2fa866; --goodbg: #e5f8ec; --warm: #f29b38; --warmbg: #fff3e2;
  --r: 22px; --sh: 0 4px 0 rgba(43, 33, 64, .12), 0 8px 24px rgba(43, 33, 64, .08);
  --font: 'Andika', 'Trebuchet MS', system-ui, sans-serif;
  --title: 'Fredoka', 'Andika', system-ui, sans-serif;
}
.th-nat { --acc: #2f9e57; --acc2: #69c98a; --soft: #e7f7ec; }
.th-mat { --acc: #2f7fd8; --acc2: #6eb0f5; --soft: #e6f1fe; }
.th-len { --acc: #c2477d; --acc2: #ec85b1; --soft: #fdeaf3; }
.th-soc { --acc: #e07b16; --acc2: #f6ad5c; --soft: #fff1e0; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink); font-family: var(--font); font-size: 20px; line-height: 1.4;
  background: linear-gradient(180deg, var(--sky1), var(--sky2)) fixed; overscroll-behavior-y: none;
  -webkit-user-select: none; user-select: none;
}
body[data-th="nat"] { background: linear-gradient(180deg, #e9f8ee, #fbfff0) fixed; }
body[data-th="mat"] { background: linear-gradient(180deg, #e6f2ff, #f3f8ff) fixed; }
body[data-th="len"] { background: linear-gradient(180deg, #fdeef5, #fff7f2) fixed; }
body[data-th="soc"] { background: linear-gradient(180deg, #fff2e2, #fffbea) fixed; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible { outline: 4px solid #ffcb2f; outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--title); font-weight: 600; margin: 0; line-height: 1.2; }
b { font-weight: 700; }
.emo { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; line-height: 1; display: inline-block; }
.xl { font-size: 1.8em; font-family: var(--title); letter-spacing: .02em; }

/* ===== Barra superior ===== */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px; background: rgba(255, 253, 248, .92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 2px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--title); font-size: 26px; color: #6a4fd0; }
.brand .lupi { width: 46px; height: 48px; }
.ttl { flex: 1; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--acc); }
.topr { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.iconbtn { width: 52px; height: 52px; flex: none; border-radius: 16px; background: #fff; box-shadow: var(--sh); font-size: 24px; display: grid; place-items: center; }
.iconbtn:active { transform: translateY(2px); box-shadow: none; }
.fsbtn { font-size: 28px; color: var(--acc); font-weight: 700; }
.fsbtn.on { background: var(--acc); color: #fff; }
:fullscreen body, :-webkit-full-screen body { overflow-y: auto; }
.starcount { background: #fff6cf; border: 2px solid #ffd54a; border-radius: 99px; padding: 6px 14px; font-weight: 700; white-space: nowrap; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 18px 16px calc(40px + env(safe-area-inset-bottom)); }
.wrap.narrow { max-width: 860px; }

/* ===== Lupi ===== */
.lupi { width: 90px; height: 94px; flex: none; overflow: visible; }
.lupi .eyes { animation: blink 4s infinite; transform-origin: 60px 55px; }
.lupi.happy .wl { animation: flapL .6s ease-in-out 3; transform-origin: 26px 64px; }
.lupi.happy .wr { animation: flapR .6s ease-in-out 3; transform-origin: 94px 64px; }
.lupi.happy { animation: hop .6s ease-in-out 2; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes flapL { 50% { transform: rotate(25deg); } }
@keyframes flapR { 50% { transform: rotate(-25deg); } }
@keyframes hop { 50% { transform: translateY(-8px); } }
.lupisays { display: flex; align-items: flex-end; gap: 10px; margin: 4px 0 18px; }
.bubble {
  position: relative; flex: 1; background: #fff; border-radius: 22px; padding: 14px 56px 14px 18px; box-shadow: var(--sh);
  font-size: 21px; margin-bottom: 14px;
}
.bubble::before { content: ''; position: absolute; left: -12px; bottom: 18px; border: 12px solid transparent; border-right-color: #fff; border-left: 0; }
.spk { width: 48px; height: 48px; border-radius: 50%; background: var(--soft); font-size: 22px; flex: none; display: inline-grid; place-items: center; vertical-align: middle; }
.spk:active { transform: scale(.92); }
.spk.mini { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; font-size: 20px; }

/* ===== Botones ===== */
.btn {
  min-height: 56px; padding: 10px 22px; border-radius: 18px; font-family: var(--title); font-weight: 600; font-size: 21px;
  background: #fff; box-shadow: var(--sh); transition: transform .1s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.btn.primary { background: var(--acc); color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.btn.ghost { background: #fff; color: var(--acc); border: 2px solid var(--line); box-shadow: none; }
.btn.big { min-height: 66px; font-size: 24px; padding: 12px 30px; }
.btn.sm { min-height: 46px; font-size: 17px; padding: 8px 14px; }
.btn.danger { color: #b33b3b; margin-top: 24px; }
.btn:disabled { opacity: .45; }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.05); } }
.row, .navrow { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.navrow { justify-content: space-between; }
.navrow.end { justify-content: flex-end; }

/* ===== Mundo ===== */
.islands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.island {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 22px 14px 18px; border-radius: 30px; background: linear-gradient(160deg, #fff 0%, var(--soft) 100%);
  border: 3px solid var(--acc2); box-shadow: var(--sh); transition: transform .15s;
}
.island:active { transform: scale(.97); }
.island.next { border-width: 4px; border-color: var(--acc); }
.isl-ico { font-size: 64px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; animation: float 4s ease-in-out infinite; }
.island:nth-child(2) .isl-ico { animation-delay: -1s; } .island:nth-child(3) .isl-ico { animation-delay: -2s; } .island:nth-child(4) .isl-ico { animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-6px); } }
.isl-name { font-family: var(--title); font-size: 25px; color: var(--acc); }
.isl-day { font-size: 18px; color: var(--ink2); }
.isl-n { font-size: 16px; color: var(--ink2); }
.ribbon { position: absolute; top: -12px; right: 14px; background: #ffcb2f; color: #5a3d00; font-weight: 700; font-size: 16px; padding: 4px 12px; border-radius: 99px; box-shadow: var(--sh); }
.tag { display: inline-block; background: #fff; border: 2px solid var(--acc2); color: var(--acc); border-radius: 99px; padding: 2px 12px; font-size: 16px; font-weight: 700; }
.tag.soon, .tag.today { background: #ffcb2f; border-color: #ffcb2f; color: #5a3d00; }
.tag.past { border-color: #b9e6c8; color: var(--good); }
.bar { width: 80%; height: 12px; background: #fff; border-radius: 99px; overflow: hidden; border: 2px solid var(--line); }
.bar i { display: block; height: 100%; background: var(--acc2); border-radius: 99px; transition: width .4s; }
.bigrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.bigbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px; border-radius: 24px; background: #fff; box-shadow: var(--sh); text-align: center; }
.bigbtn span { font-size: 40px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.bigbtn b { font-family: var(--title); font-size: 21px; }
.bigbtn em { font-style: normal; font-size: 15px; color: var(--ink2); }
.bigbtn.exam { background: #fff7d6; } .bigbtn.rev { background: #ffeef3; } .bigbtn.prog { background: #eaf6ff; }
.bigbtn:active { transform: scale(.97); }

/* ===== Materia ===== */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tcard {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 14px;
  background: #fff; border-radius: var(--r); box-shadow: var(--sh); border: 3px solid transparent; text-align: center; min-height: 190px;
}
.tcard:active { transform: scale(.97); border-color: var(--acc2); }
.tnum { position: absolute; top: 10px; left: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--acc); font-weight: 700; display: grid; place-items: center; font-size: 17px; }
.tflag { position: absolute; top: 8px; right: 10px; font-size: 22px; }
.tico { font-size: 50px; line-height: 1.1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.tname { font-family: var(--title); font-size: 20px; line-height: 1.15; }
.pips { display: flex; gap: 6px; justify-content: center; }
.pips i { font-style: normal; font-size: 18px; opacity: .3; filter: grayscale(1); }
.pips i.on { opacity: 1; filter: none; }
.tstars { color: #f5b300; font-size: 24px; letter-spacing: 2px; white-space: nowrap; }
.examcard { background: #fff7d6; border-color: #ffd54a; }

/* ===== Camino del tema ===== */
.path { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.step {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; text-align: left;
  background: #fff; border-radius: var(--r); box-shadow: var(--sh); border: 3px solid transparent; min-height: 86px;
}
.step:active { transform: scale(.98); }
.step.done { background: var(--soft); }
.step.nextstep { border-color: var(--acc); animation: glowb 1.8s ease-in-out infinite; }
@keyframes glowb { 50% { box-shadow: 0 0 0 6px rgba(255, 203, 47, .55), var(--sh); } }
.step.rev { background: #ffeef3; border-color: #f7a8c1; }
.step.big-exam { background: #fff7d6; border-color: #ffd54a; }
.snum { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 20px; }
.step.done .snum { background: var(--good); }
.sico { font-size: 40px; flex: none; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.stxt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.stxt b { font-family: var(--title); font-size: 24px; color: var(--acc); }
.stxt em { font-style: normal; font-size: 17px; color: var(--ink2); }

/* ===== Puntitos de avance ===== */
.dots { display: flex; justify-content: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.dots i { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--line); transition: all .2s; }
.dots i.cur { background: var(--acc2); border-color: var(--acc); transform: scale(1.25); }
.dots i.ok { background: var(--good); border-color: var(--good); }
.dots i.try { background: #ffcb2f; border-color: #f0b400; }
.dots.small i { width: 14px; height: 14px; }

/* ===== Diapositivas (Descubrir) ===== */
.slide { background: var(--paper); border-radius: 28px; padding: 22px; box-shadow: var(--sh); }
.slide.center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.slide h2 { font-size: 28px; color: var(--acc); display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.slart { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 120px; margin-bottom: 8px; flex-wrap: wrap; }
.slart .emo { font-size: 92px; }
.slart .fig { width: 130px; height: 130px; }
.sltxt { font-size: 23px; text-align: center; margin: 10px auto 4px; max-width: 640px; }
.pop { animation: pop .35s cubic-bezier(.2, 1.4, .5, 1); }
@keyframes pop { from { opacity: 0; transform: scale(.92) translateY(10px); } }
.reveal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.reveal.n2, .reveal.n4 { grid-template-columns: repeat(2, 1fr); }
.rcard {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px; border-radius: 20px;
  background: linear-gradient(160deg, var(--acc2), var(--acc)); color: #fff; min-height: 150px; box-shadow: var(--sh); text-align: center;
}
.rcard .rart { font-size: 46px; min-height: 60px; display: grid; place-items: center; }
.rcard .rart .fig { width: 76px; height: 76px; }
.rcard .rart .emo { font-size: 46px; }
.rcard b { font-family: var(--title); font-size: 21px; }
.rcard .rtxt { display: none; font-size: 17px; line-height: 1.3; }
.rcard:not(.open)::after { content: '👆 Tocá'; font-size: 15px; opacity: .9; }
.rcard.open { background: #fff; color: var(--ink); border: 3px solid var(--acc2); animation: flipin .35s; }
.rcard.open b { color: var(--acc); }
.rcard.open .rtxt { display: block; }
@keyframes flipin { from { transform: rotateY(90deg); } }
.askbox { margin-top: 12px; }
.dot { font-size: 90px !important; line-height: .5 !important; font-weight: 900; }
.dot.s { color: #2fa866; } .dot.a { color: #f29b38; } .dot.f { color: #e5484d; }
.demo-blocks { display: flex; align-items: flex-end; gap: 18px; }

/* ===== Pregunta ===== */
.qcard { background: var(--paper); border-radius: 28px; padding: 20px; box-shadow: var(--sh); }
.qtext { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 25px; text-align: center; font-weight: 700; margin: 6px 0 14px; }
.qtext > span { flex: 0 1 auto; }
.qart { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.qart .emo { font-size: 80px; }
.qart .fig { width: 150px; height: 150px; }
.listen { display: flex; align-items: center; gap: 10px; margin: 8px auto 12px; padding: 14px 26px; border-radius: 99px; background: var(--acc); color: #fff; font-size: 32px; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.listen span { font-size: 21px; font-family: var(--title); }
.listen:active { transform: translateY(3px); box-shadow: none; }
.readcard { background: #fffbe8; border: 3px dashed #f3d77a; border-radius: 20px; padding: 14px 18px; font-size: 22px; line-height: 1.6; margin-bottom: 14px; text-align: left; -webkit-user-select: text; user-select: text; }
.readcard p { margin: 0 0 6px; text-indent: 1.4em; }
.readcard.big { font-size: 30px; text-align: center; }
.readcard .rtitle { display: block; text-align: center; font-family: var(--title); font-size: 24px; color: var(--acc); }
.readcard .btn { margin-top: 8px; }
.hintb { display: none; margin: 0 auto 12px; max-width: 600px; text-align: center; background: #fff7d6; border-radius: 16px; padding: 10px 16px; font-size: 20px; }
.hintb.show { display: block; animation: pop .3s; }
.game { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Respuesta */
.fb { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 16px; border-radius: 22px; animation: pop .35s; flex-wrap: wrap; }
.fb .lupi { width: 70px; height: 74px; }
.fb.good { background: var(--goodbg); border: 3px solid #a8e2bf; }
.fb.warm { background: var(--warmbg); border: 3px solid #ffd39b; }
.fbtxt { flex: 1; min-width: 200px; display: flex; flex-direction: column; font-size: 19px; }
.fbtxt b { font-family: var(--title); font-size: 26px; }
.fb.good .fbtxt b { color: var(--good); } .fb.warm .fbtxt b { color: #c56b00; }

/* Opciones */
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; }
.opts.two { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
.opt {
  min-height: 84px; padding: 12px; border-radius: 20px; background: #fff; border: 3px solid var(--line); box-shadow: var(--sh);
  font-size: 23px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
}
.opt:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.opt.good, .tile.good, .chip.good { background: var(--goodbg); border-color: var(--good); animation: bounce .4s; }
.opt.bad { background: #f3f0f7; opacity: .55; }
.opt.sel { background: var(--soft); border-color: var(--acc); }
.glow { animation: glowb 1.2s ease-in-out infinite !important; border-color: #ffcb2f !important; }
.optfig .fig { width: 76px; height: 76px; display: block; }
@keyframes bounce { 40% { transform: scale(1.08); } }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* Teclado numérico */
.numwrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.numdisp { min-width: 190px; padding: 6px 20px; border-radius: 20px; background: #fff; border: 4px solid var(--acc2); font-family: var(--title); font-size: 54px; text-align: center; color: var(--acc); }
.numdisp.empty { color: #cfc6e2; }
.numdisp.good { border-color: var(--good); color: var(--good); background: var(--goodbg); }
.keypad { display: grid; grid-template-columns: repeat(3, 84px); gap: 10px; }
.key { height: 70px; border-radius: 18px; background: #fff; box-shadow: var(--sh); font-family: var(--title); font-size: 32px; font-weight: 600; }
.key:active { transform: translateY(3px); box-shadow: none; background: var(--soft); }
.key.go { background: var(--good); color: #fff; }
.key.del { background: #fff3e2; }

/* Fichas */
.slots, .pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.slots { min-height: 76px; padding: 12px; border-radius: 20px; background: var(--soft); }
.slot { min-width: 64px; min-height: 64px; border-radius: 14px; border: 3px dashed var(--acc2); display: flex; }
.k-words .slot { min-width: 74px; }
.k-cards.slots { flex-direction: column; align-items: stretch; max-width: 520px; }
.k-cards .slot { min-height: 66px; }
.k-cards.pool { flex-direction: column; align-items: stretch; max-width: 520px; }
.tile { min-width: 64px; min-height: 64px; padding: 6px 14px; border-radius: 14px; background: #fff; border: 3px solid var(--acc2); box-shadow: 0 4px 0 rgba(0, 0, 0, .1); font-size: 30px; font-weight: 700; font-family: var(--title); }
.k-words .tile { font-size: 25px; }
.k-cards .tile { font-size: 21px; width: 100%; font-family: var(--font); }
.slot .tile { margin: -3px; flex: 1; }

/* Clasificar */
.tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 60px; width: 100%; }
.chip {
  padding: 12px 18px; border-radius: 16px; background: #fff; border: 3px solid var(--acc2); box-shadow: 0 4px 0 rgba(0, 0, 0, .1);
  font-size: 21px; font-weight: 700; touch-action: none; display: flex; align-items: center; gap: 6px; text-align: center; justify-content: center;
}
.chip .optfig .fig { width: 54px; height: 54px; }
.chip.drag { z-index: 50; position: relative; box-shadow: 0 12px 24px rgba(0, 0, 0, .2); transition: none; }
.chip.selc { border-color: #ffcb2f; background: #fff7d6; transform: scale(1.06); }
.chip.placed { border-color: var(--acc); background: var(--soft); }
.buckets { display: grid; gap: 12px; width: 100%; }
.buckets.n2 { grid-template-columns: repeat(2, 1fr); }
.buckets.n3 { grid-template-columns: repeat(3, 1fr); }
.bucket { min-height: 170px; border-radius: 22px; border: 4px dashed var(--acc2); background: var(--soft); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bucket-t { font-family: var(--title); font-weight: 600; font-size: 22px; text-align: center; color: var(--acc); }
.bucket-b { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bucket-b .chip { font-size: 17px; padding: 6px 10px; box-shadow: none; }

/* Unir */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; }
.mcol { display: flex; flex-direction: column; gap: 12px; }
.mitem { min-height: 70px; padding: 10px 14px; border-radius: 18px; background: #fff; border: 3px solid var(--line); box-shadow: var(--sh); font-size: 21px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.mitem .optfig .fig { width: 52px; height: 52px; }
.mitem.selc { border-color: #ffcb2f; background: #fff7d6; transform: scale(1.03); }
.mitem.good { box-shadow: none; animation: bounce .4s; }
.mitem.c0 { background: #dff6e7; border-color: #3bb26b; } .mitem.c1 { background: #e3efff; border-color: #4f8fe0; }
.mitem.c2 { background: #fde7f1; border-color: #d65b93; } .mitem.c3 { background: #fff2dc; border-color: #ec9a2d; }
.mitem.c4 { background: #efe8ff; border-color: #8a6bf0; } .mitem.c5 { background: #e2f8f7; border-color: #2eaaa2; }

/* Memoria */
.mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; max-width: 680px; }
.mcard { position: relative; aspect-ratio: 1 / 1; border-radius: 18px; perspective: 600px; }
.mcard > span { position: absolute; inset: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .35s; box-shadow: var(--sh); }
.mfront { background: linear-gradient(150deg, var(--acc2), var(--acc)); font-size: 40px; }
.mback { background: #fff; border: 3px solid var(--acc2); transform: rotateY(180deg); font-size: 19px; font-weight: 700; line-height: 1.15; }
.mback .fig { width: 80%; height: 80%; }
.mcard.flip .mfront { transform: rotateY(-180deg); }
.mcard.flip .mback { transform: rotateY(0); }
.mcard.good .mback { border-color: var(--good); background: var(--goodbg); }

/* Textos (párrafos y puntos) */
.texto { background: #fffbe8; border-radius: 20px; padding: 16px 20px; font-size: 24px; line-height: 1.7; width: 100%; text-align: left; }
.texto .par { margin: 0 0 10px; text-indent: 1.6em; border-radius: 12px; padding: 2px 6px; transition: background .2s; }
.texto .punto { display: inline-block; font-weight: 900; font-size: 1.3em; min-width: .8em; text-align: center; border-radius: 10px; text-indent: 0; }
.markable.m-par .par { outline: 2px dashed #e5d79e; cursor: pointer; }
.markable:not(.m-par) .punto { background: #fff; outline: 2px dashed #e5c55a; padding: 0 10px; margin: 0 2px; cursor: pointer; }
.texto .good { background: var(--goodbg) !important; outline: 3px solid var(--good) !important; }
.texto .sel { background: var(--soft) !important; outline: 3px solid var(--acc) !important; }
.texto .glow { outline: 3px solid #ffcb2f !important; }
.hl-par .par:nth-child(1) { background: #dff6e7; } .hl-par .par:nth-child(2) { background: #e3efff; } .hl-par .par:nth-child(3) { background: #fde7f1; }
.hl-ora .ora:nth-child(odd) { background: #e3efff; border-radius: 8px; } .hl-ora .ora:nth-child(even) { background: #fff2dc; border-radius: 8px; }
.hl-cap .cap { background: #ffcb2f; border-radius: 6px; padding: 0 3px; }
.hl-seguido .punto[data-k="seguido"], .hl-aparte .punto[data-k="aparte"], .hl-final .punto[data-k="final"] { color: #fff; padding: 0 8px; animation: bounce .6s 2; }
.hl-seguido .punto[data-k="seguido"] { background: #2fa866; } .hl-aparte .punto[data-k="aparte"] { background: #f29b38; } .hl-final .punto[data-k="final"] { background: #e5484d; }

/* Cuentas y dibujos */
.cuenta { display: inline-flex; flex-direction: column; align-items: flex-end; font-family: var(--title); font-size: 54px; line-height: 1.1; padding: 6px 22px; background: #fff; border-radius: 18px; border: 3px solid var(--line); letter-spacing: .1em; }
.cuenta i { font-style: normal; color: var(--acc); margin-right: 12px; }
.cuenta > div:has(> i) { border-bottom: 4px solid var(--ink); }
.cuenta .res { color: var(--good); }
.cuenta .llevo { font-size: 26px; color: #e5484d; line-height: 1; }
.grupos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.grupo { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 160px; padding: 8px 10px; border-radius: 18px; border: 3px dashed var(--acc2); background: #fff; font-size: 30px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; line-height: 1.1; }
.grupo.kid { flex-direction: column; align-items: center; }
.emo.sm { font-size: 34px; }
.xarrow { font-size: 40px; color: var(--acc); font-weight: 900; }
.fig { display: inline-block; }

/* ===== Laboratorios ===== */
.lab { background: var(--paper); border-radius: 28px; padding: 18px; box-shadow: var(--sh); display: flex; flex-direction: column; gap: 14px; }
.xinfo { display: flex; flex-direction: column; gap: 4px; }
.xinfo b { font-family: var(--title); font-size: 28px; color: var(--acc); }
.xinfo span { font-size: 22px; }
.xpanel { background: var(--soft); border-radius: 22px; padding: 16px; min-height: 120px; }
.xpanel.wide { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.xsplit { display: grid; grid-template-columns: minmax(240px, 1fr) 1fr; gap: 18px; align-items: center; }
.xside { display: flex; flex-direction: column; gap: 14px; }
.xfig .plant { width: 100%; max-height: 62vh; display: block; }
.plant .part { cursor: pointer; transition: filter .2s; }
.plant .part.on { filter: drop-shadow(0 0 6px #ffcb2f) drop-shadow(0 0 6px #ffcb2f); }
.xchips { display: flex; flex-wrap: wrap; gap: 8px; }
.xchip { padding: 6px 14px; border-radius: 99px; background: #fff; border: 2px solid var(--line); color: #b5abc9; font-weight: 700; }
.xchip.on { color: var(--good); border-color: var(--good); background: var(--goodbg); }
.xchip.on::before { content: '✔ '; }
.xtoggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.xtoggle { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border-radius: 20px; background: #f2eff7; border: 3px solid #ddd6ea; font-weight: 700; font-size: 20px; filter: grayscale(.8); opacity: .75; }
.xtoggle .emo { font-size: 44px; }
.xtoggle.on { background: #fff7d6; border-color: #ffcb2f; filter: none; opacity: 1; animation: bounce .35s; }
.xview { background: var(--soft); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transition: background .3s; }
.xview.good { background: var(--goodbg); }
.xview.tense0 { background: #efe8ff; } .xview.tense1 { background: #e3efff; } .xview.tense2 { background: #fff2dc; }
.xart { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 110px; }
.xart .emo { font-size: 64px; transition: transform .4s; }
.grow1 { transform: scale(.7); } .grow2 { transform: scale(1); } .grow3 { transform: scale(1.5); animation: wig 1.6s ease-in-out infinite; }
.wig { animation: wig 1.6s ease-in-out infinite; }
@keyframes wig { 25% { rotate: -6deg; } 75% { rotate: 6deg; } }
.xout { display: flex; flex-direction: column; gap: 6px; }
.xout b { background: #fff; border-radius: 14px; padding: 6px 12px; font-size: 20px; }
.size0 .emo { transform: scale(.55); } .size2 .emo { transform: scale(1.7); }
.xctrl { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.xctrl label { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; font-size: 19px; color: var(--ink2); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pill { min-height: 52px; padding: 8px 18px; border-radius: 99px; background: #fff; border: 3px solid var(--line); font-weight: 700; font-size: 19px; }
.pill.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepb { width: 58px; height: 58px; border-radius: 50%; background: var(--acc); color: #fff; font-size: 34px; font-weight: 700; line-height: 1; box-shadow: 0 4px 0 rgba(0, 0, 0, .18); }
.stepb:active { transform: translateY(3px); box-shadow: none; }
.digit { min-width: 54px; text-align: center; font-family: var(--title); font-size: 40px; }
.xbig { font-family: var(--title); font-size: 46px; color: var(--acc); line-height: 1.1; }
.xsum { font-size: 23px; font-weight: 700; }
.xwords { padding: 8px 18px; border-radius: 16px; background: #fff; font-size: 22px; font-weight: 700; }
.xnum { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--soft); border-radius: 22px; padding: 14px; }
.xblocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.xcol { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border-radius: 20px; background: #fff; border: 3px solid var(--line); }
.xcol > b { font-family: var(--title); font-size: 20px; }
.xcol.bc > b { color: #2f7fd8; } .xcol.bd > b { color: #e07b16; } .xcol.bu > b { color: #2f9e57; }
.pile { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-content: flex-end; min-height: 120px; }
i.bc { width: 50px; height: 50px; border-radius: 4px; background: #6eb0f5; background-image: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px); background-size: 5px 5px; border: 2px solid #2f7fd8; }
i.bd { width: 10px; height: 50px; border-radius: 3px; background: #f6ad5c; background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px); background-size: 10px 5px; border: 2px solid #e07b16; }
i.bu { width: 12px; height: 12px; border-radius: 3px; background: #69c98a; border: 2px solid #2f9e57; }
.demo-blocks i.bc { width: 90px; height: 90px; background-size: 9px 9px; } .demo-blocks i.bd { width: 18px; height: 90px; background-size: 18px 9px; } .demo-blocks i.bu { width: 20px; height: 20px; }
.bodyrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.bodybtn { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 18px; background: #fff; border: 3px solid var(--line); font-size: 17px; }
.bodybtn .fig { width: 64px; height: 64px; }
.bodybtn.on { border-color: var(--acc); background: var(--soft); }
.bodyfig .fig { width: 190px; height: 190px; }
.bodyfig .emo { font-size: 120px; }
.xpanel.wide > div:last-child { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.xlike { margin: 0; font-size: 20px; }
.xlegend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: 17px; }
.xlegend span { background: #fff; border-radius: 99px; padding: 6px 12px; border: 2px solid var(--line); }
.circuit { display: flex; align-items: stretch; gap: 8px; }
.circuit .xarrow { align-self: center; }
.stage-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 20px; color: #fff; text-align: center; min-height: 190px; }
.stage-card.s0 { background: #2f9e57; } .stage-card.s1 { background: #2f7fd8; } .stage-card.s2 { background: #e07b16; }
.stage-card .emo { font-size: 48px; }
.stage-card b { font-family: var(--title); font-size: 20px; }
.stage-card em { font-style: normal; font-size: 15px; opacity: .95; }
.sc-txt { display: none; background: #fff; color: var(--ink); border-radius: 12px; padding: 8px; font-size: 17px; margin-top: 4px; }
.stage-card.open .sc-txt { display: block; animation: pop .3s; }
.stage-card:not(.open)::after { content: '👆 Tocá'; font-size: 15px; }

/* ===== Fin, descanso, resultados ===== */
.endscreen { padding-top: 40px; }
.bigstars { display: flex; gap: 8px; font-size: 64px; color: #e2dbee; }
.bigstars span.on { color: #ffc31f; animation: starpop .5s backwards; text-shadow: 0 3px 0 #e2a000; }
.bigstars span.on:nth-child(2) { animation-delay: .2s; } .bigstars span.on:nth-child(3) { animation-delay: .4s; }
@keyframes starpop { from { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.3); } }
.score { font-size: 24px; font-weight: 700; margin: 0; }
.restart { width: 190px; height: 190px; display: grid; place-items: center; margin: 10px; }
.breathe { font-size: 90px; animation: breathe 5s ease-in-out infinite; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
@keyframes breathe { 50% { transform: scale(1.5); } }
.sec { font-size: 24px; margin: 26px 0 12px; color: var(--acc); }
.revlist { display: flex; flex-direction: column; gap: 10px; }
.revitem { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 18px; padding: 12px 16px; box-shadow: var(--sh); border-left: 8px solid var(--line); }
.revitem.good { border-left-color: var(--good); } .revitem.warm { border-left-color: var(--warm); background: #fffaf2; }
.revitem > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.revn { font-size: 28px; }
.revg { color: var(--ink2); font-size: 18px; }
.revc { color: var(--good); font-size: 19px; }
.revw { font-size: 18px; }
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { background: #fff; border-radius: 20px; padding: 14px; text-align: center; box-shadow: var(--sh); display: flex; flex-direction: column; }
.stat b { font-family: var(--title); font-size: 30px; }
.stat span { color: var(--ink2); font-size: 17px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 8px; background: #f2eff7; border-radius: 20px; opacity: .65; }
.badge span { font-size: 42px; }
.badge b { font-family: var(--title); font-size: 18px; }
.badge em { font-style: normal; font-size: 14px; color: var(--ink2); }
.badge.on { background: #fff7d6; border: 3px solid #ffd54a; opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.progsub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.psub { background: #fff; border-radius: 22px; padding: 14px; box-shadow: var(--sh); border-top: 6px solid var(--acc); }
.psub h4 { font-size: 21px; color: var(--acc); margin-bottom: 6px; }
.psub h4 small { color: var(--ink2); font-weight: 400; font-size: 16px; }
.prow { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: 'n s a' 'p p p'; gap: 0 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 17px; }
.pname { grid-area: n; font-weight: 700; }
.prow .pips { grid-area: p; justify-content: flex-start; }
.prow .tstars { grid-area: s; font-size: 18px; }
.acc { grid-area: a; font-size: 15px; white-space: nowrap; }
.note { color: var(--ink2); font-size: 16px; margin-top: 24px; }

/* Festejo */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.confetti span { position: absolute; top: -50px; animation: fall 2s ease-in forwards; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); opacity: .7; } }

/* ===== Adaptación a pantallas ===== */
@media (min-width: 900px) {
  .islands { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 18px; }
  .reveal, .reveal.n4 { grid-template-columns: repeat(2, 1fr); }
  .opts { grid-template-columns: 1fr; }
  .opts.two { grid-template-columns: repeat(2, 1fr); }
  .bodyrow { grid-template-columns: repeat(3, 1fr); }
  .xsplit { grid-template-columns: 1fr; }
  .xfig .plant { max-height: 46vh; }
  .circuit { flex-direction: column; }
  .circuit .xarrow { transform: rotate(90deg); }
  .stage-card { min-height: 0; }
  .progsub { grid-template-columns: 1fr; }
  .bigrow { grid-template-columns: 1fr; }
  .bigbtn { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 18px; text-align: left; flex-wrap: wrap; }
  .bigbtn em { width: 100%; padding-left: 52px; margin-top: -6px; }
  .buckets.n3 { grid-template-columns: 1fr; }
  .bucket { min-height: 110px; }
  .qtext { font-size: 22px; }
  .slide h2 { font-size: 24px; }
  .sltxt { font-size: 20px; }
  .lupi { width: 64px; height: 68px; }
  .bubble { font-size: 18px; }
  .ttl { font-size: 18px; }
  .starcount { padding: 4px 10px; font-size: 16px; }
  .iconbtn { width: 46px; height: 46px; }
  .keypad { grid-template-columns: repeat(3, 76px); }
  .cuenta { font-size: 44px; }
  .tile { min-width: 52px; min-height: 52px; font-size: 26px; }
  .slot { min-width: 52px; min-height: 52px; }
  .mem { gap: 8px; }
  .mback { font-size: 15px; }
}
@media (max-width: 480px) {
  .islands { grid-template-columns: 1fr 1fr; gap: 12px; }
  .isl-ico { font-size: 48px; }
  .isl-name { font-size: 20px; }
  .topics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tcard { min-height: 170px; }
  .tname { font-size: 17px; }
  .match { gap: 10px; }
  .mitem { font-size: 17px; padding: 8px; }
  .statrow { grid-template-columns: 1fr; }
  .brand b { display: none; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .slart { min-height: 80px; } .slart .emo { font-size: 64px; }
  .qart .emo { font-size: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}