:root{
  --bg:#0e1030; --bg2:#181b3e; --card:#23264f; --card2:#2b2f5e;
  --accent:#34d399; --accent2:#60a5fa;
  --warn:#fbbf24; --bad:#f87171; --text:#eef1ff; --muted:#a3abd6;
  --radius:22px; --line:#33386b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  background:
    radial-gradient(900px 500px at 12% -8%, #2a1c5e 0%, transparent 55%),
    radial-gradient(900px 520px at 92% -4%, #103a4f 0%, transparent 55%),
    radial-gradient(1100px 700px at 50% 110%, #1d2a5e 0%, transparent 60%),
    var(--bg);
  color:var(--text); display:flex; flex-direction:column; min-height:100vh;
}

/* ---------- Topbar ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 18px;}
.logo{background:none;border:none;color:var(--text);font-size:23px;font-weight:900;cursor:pointer;letter-spacing:.3px;display:flex;align-items:center;gap:4px;transition:transform .12s}
.logo:active{transform:scale(.94)}
.stats{display:flex;gap:10px;font-weight:800;font-size:16px}
.stats span{
  background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid var(--line);
  padding:7px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.25);
}
#streak{color:#ffd9a0}
#spoken{color:#bff5dd}

main{flex:1;width:100%;max-width:700px;margin:0 auto;padding:8px 18px 30px}
.footbar{text-align:center;color:var(--muted);padding:16px;font-size:13.5px}

/* Entrada suave de cada pantalla */
#screen>*{animation:fadeUp .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Home hero ---------- */
.hero{text-align:center;padding:8px 0 16px}
.mascot{font-size:68px;line-height:1;display:inline-block;animation:bob 3s ease-in-out infinite;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}
.hero h1{margin:4px 0 0;font-size:38px;font-weight:900;letter-spacing:.5px;
  background:linear-gradient(90deg,#34d399,#60a5fa 60%,#a78bfa);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tagline{color:var(--muted);margin:6px 0 14px;font-size:17px}
.phasebar{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(160deg,var(--card2),var(--bg2));
  border:1px solid var(--line);padding:9px 16px;border-radius:999px;font-size:15px;color:var(--muted);
  box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.phasebar b{color:var(--accent)}

/* ---------- Rejilla de modos (panel) ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.mode{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;
  background:linear-gradient(165deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;color:var(--text);cursor:pointer;
  transition:transform .12s ease, border-color .2s, box-shadow .2s;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
/* barra de color superior por categoría */
.mode::before{content:"";position:absolute;left:0;top:0;height:5px;width:100%;background:var(--c,var(--accent2));opacity:.9}
.mode:hover{transform:translateY(-3px);border-color:var(--c,var(--accent));box-shadow:0 14px 30px rgba(0,0,0,.34)}
.mode:active{transform:translateY(0) scale(.99)}
.mode .emoji{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:30px;
  background:#ffffff12;box-shadow:inset 0 0 0 2px var(--c,var(--accent2)), 0 4px 12px rgba(0,0,0,.25);
  margin-bottom:2px;
}
.mode .t{font-weight:900;font-size:19px}
.mode .d{color:var(--muted);font-size:14.5px;line-height:1.35}
.mode.wide{grid-column:1 / -1}
.mode.wide{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
.mode.wide .emoji{margin-bottom:0}
.mode.wide .t{flex:1 1 auto}
.mode.wide .d{flex-basis:100%}

/* color por modo (solo CSS, vía data-go) */
.mode[data-go="themes"]{--c:#fbbf24}
.mode[data-go="listen"]{--c:#38bdf8}
.mode[data-go="shadow"]{--c:#34d399}
.mode[data-go="cards"]{--c:#a78bfa}
.mode[data-go="tpr"]{--c:#fb7185}
.mode[data-go="dialogues"]{--c:#2dd4bf}
.mode[data-go="course"]{--c:#818cf8}
.mode[data-go="formula"]{--c:#fb923c}
.mode[data-go="story"]{--c:#c084fc}

.hint{margin-top:16px;background:#2a1f12;border:1px solid #5a4321;color:#ffd9a0;padding:12px 14px;border-radius:14px;font-size:14px}
.hint:empty{display:none}

/* ---------- Subbar ---------- */
.subbar{display:flex;align-items:center;gap:12px;margin:6px 0 18px;color:var(--muted);font-weight:700}
.back{
  background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);
  color:var(--text);width:44px;height:44px;border-radius:14px;font-size:21px;cursor:pointer;
  transition:transform .12s, border-color .2s;box-shadow:0 4px 12px rgba(0,0,0,.25)
}
.back:hover{border-color:var(--accent2)}
.back:active{transform:scale(.9)}

/* ---------- Columna centrada ---------- */
.center{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}

.bigplay{
  background:linear-gradient(160deg,var(--accent2),#3b82f6);border:none;color:white;
  width:164px;height:164px;border-radius:50%;font-size:46px;cursor:pointer;
  box-shadow:0 14px 34px rgba(59,130,246,.45);transition:transform .12s
}
.bigplay:active{transform:scale(.95)}
.bigplay small{font-size:13px;font-weight:600}

.options{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:380px}
.opt{
  background:linear-gradient(165deg,var(--card2),var(--card));border:2px solid var(--line);
  border-radius:22px;padding:22px;font-size:50px;cursor:pointer;
  transition:transform .1s, border-color .2s, background .2s;box-shadow:0 6px 16px rgba(0,0,0,.25)
}
.opt:hover{border-color:var(--accent2);transform:translateY(-2px)}
.opt:active{transform:scale(.96)}
.opt.good{border-color:var(--accent);background:#13351f;animation:pop .3s}
.opt.bad{border-color:var(--bad);background:#3a1717;animation:shake .35s}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}

.card-emoji{font-size:98px;line-height:1;animation:pop .4s}
.word-text{font-size:31px;font-weight:900;letter-spacing:.5px}
.example{color:var(--muted);margin-top:6px;font-size:17px}
.word-reveal{background:none;border:1px dashed #4a5090;color:var(--muted);padding:7px 14px;border-radius:999px;cursor:pointer;font-size:13.5px;transition:border-color .2s}
.word-reveal:hover{border-color:var(--accent2);color:var(--text)}
.hidden{display:none !important}

/* ---------- Botones de acción ---------- */
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.round{
  background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);color:var(--text);
  padding:14px 24px;border-radius:999px;font-size:18px;font-weight:800;cursor:pointer;
  transition:transform .1s, border-color .2s, box-shadow .2s;box-shadow:0 5px 14px rgba(0,0,0,.25)
}
.round:hover{border-color:var(--accent2)}
.round:active{transform:scale(.95)}
.round.mic{background:linear-gradient(160deg,#fb7185,#ef4444);border:none;color:white;box-shadow:0 8px 22px rgba(239,68,68,.4)}
.round.listening{animation:pulse 1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 18px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

.feedback{min-height:28px;font-size:18px;background:var(--bg2);border:1px solid var(--line);padding:13px 16px;border-radius:16px;width:100%;max-width:440px}
.next{
  background:linear-gradient(160deg,#4ade80,var(--accent));border:none;color:#06281a;font-weight:900;
  padding:14px 28px;border-radius:999px;font-size:16px;cursor:pointer;
  box-shadow:0 8px 20px rgba(52,211,153,.32);transition:transform .1s
}
.next:active{transform:scale(.96)}
.next.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);box-shadow:none}
.next.ghost:hover{color:var(--text);border-color:var(--accent2)}

/* ---------- Tarjetas SRS ---------- */
.card{background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px;width:100%;max-width:430px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.reveal-btn{background:linear-gradient(160deg,#7cb8ff,var(--accent2));border:none;color:#06203f;font-weight:900;padding:14px 28px;border-radius:999px;font-size:16px;cursor:pointer;box-shadow:0 8px 20px rgba(96,165,250,.34);transition:transform .1s}
.reveal-btn:active{transform:scale(.96)}
.cardq{font-size:19px;color:var(--muted);font-weight:600}
.grade-hint{color:var(--muted);font-size:14px}
.flashcard{background:linear-gradient(160deg,#2c3366,#1c2046);border:1px solid #3f4688;border-radius:24px;padding:26px 22px;width:100%;max-width:390px;box-shadow:0 20px 48px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;gap:8px}
.fc-emoji{font-size:90px;line-height:1;animation:pop .35s}
.fc-cue{font-size:30px;font-weight:900;color:#fff;text-align:center}
.fc-q{font-size:15px;color:var(--muted)}
.fc-divider{width:82%;height:1px;background:#3f4688;margin:10px 0}
.fc-en{font-size:37px;font-weight:900;color:var(--accent);letter-spacing:.5px}
.fc-ex{color:var(--muted);font-size:16px;font-style:italic;margin-bottom:6px}
.answer{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.grades{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;width:100%;max-width:430px}
.g{border:none;border-radius:14px;padding:14px 6px;font-weight:800;cursor:pointer;color:white;transition:transform .1s;box-shadow:0 5px 14px rgba(0,0,0,.3)}
.g:active{transform:scale(.94)}
.g.again{background:#ef4444}.g.hard{background:#f59e0b}.g.good{background:#10b981}.g.easy{background:#3b82f6}
.counter{color:var(--muted);font-size:15px;font-weight:700}

.timer{font-size:27px;font-weight:900;color:var(--warn);min-height:34px}
.tpr-card{background:linear-gradient(160deg,#34286a,#1d2148);border:1px solid #4a3f8f;border-radius:24px;padding:24px;width:100%;max-width:390px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.tpr-cmd{font-size:33px;font-weight:900;color:#fff;text-align:center}
.tpr-es{color:var(--muted);font-size:17px}

/* ---------- Articulador ---------- */
.articulator{display:flex;flex-direction:column;align-items:center;gap:8px}
.views{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.face,.side{width:150px;height:160px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.face .skin{fill:#ffcf99}
.face .eye{fill:#2b2440}
.face .mouth{transition:rx .11s ease, ry .11s ease, fill .11s ease}
.face .teeth{fill:#fff;transition:opacity .11s ease, y .11s ease}
.side{background:#11132b;border-radius:18px;border:1px solid var(--line)}
.side .head{fill:#2a2150;opacity:.5}
.side .palate{fill:none;stroke:#ffd9c2;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.side .ridge,.side .utooth,.side .ltooth{fill:#fff}
.side .jaw{stroke:#ffd9c2;stroke-width:5;stroke-linecap:round}
.side .lower{transition:transform .11s ease}
.side .tongue{fill:#ef6f86;stroke:#c94a63;stroke-width:1.5;transition:d .11s ease}
.artic-hint{color:var(--accent2);font-size:13.5px;font-weight:600;min-height:34px;max-width:340px;text-align:center}
.mouth-hint{color:var(--muted);font-size:14px;margin-top:-6px}
.slow{background:transparent;border:1px solid #4a5090;color:var(--accent2);padding:9px 17px;border-radius:999px;font-size:14px;font-weight:800;cursor:pointer;transition:border-color .2s}
.slow:hover{border-color:var(--accent2)}
.slow:active{transform:scale(.95)}
.emoji-mini{font-size:52px;line-height:1}
.big-emoji{font-size:88px;line-height:1;animation:pop .35s}

/* ---------- Diálogos ---------- */
.theme{color:var(--accent);margin:20px 0 8px;font-size:15px;text-transform:uppercase;letter-spacing:1px;font-weight:800}
.dlist{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dcard{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:18px;padding:16px;color:var(--text);cursor:pointer;transition:transform .12s, border-color .2s;box-shadow:0 5px 14px rgba(0,0,0,.22)}
.dcard:hover{border-color:#2dd4bf;transform:translateY(-2px)}
.dcard:active{transform:scale(.98)}
.dcard .emoji{font-size:32px}
.dcard .dgoal{font-weight:800;font-size:17px}
.dcard .dn{color:var(--muted);font-size:12px}
.chat{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;max-height:46vh;overflow-y:auto;padding:4px}
.bubble{max-width:82%;padding:11px 15px;border-radius:18px;font-size:18px;line-height:1.35;opacity:.5;transition:opacity .25s, transform .25s}
.bubble.active{opacity:1;transform:scale(1.02)}
.bubble b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:2px}
.bubble.left{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px}
.bubble.right{align-self:flex-end;background:#13351f;border:1px solid #1f5c38;border-bottom-right-radius:5px}
.glossary{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:15px 16px;width:100%;max-width:450px;text-align:left}
.glossary h4{margin:0 0 8px}
.grow{padding:6px 0;border-bottom:1px solid var(--line);font-size:15px}
.grow b{color:var(--accent2)}

/* ---------- Curso ---------- */
.course-intro{color:var(--muted);font-size:16px;margin:0 0 14px;line-height:1.4}
.lessons{display:flex;flex-direction:column;gap:9px}
.lesson{display:flex;align-items:center;gap:14px;text-align:left;background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;padding:13px 15px;color:var(--text);cursor:pointer;transition:transform .12s, border-color .2s;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.lesson:hover{border-color:var(--accent2);transform:translateX(3px)}
.lesson:active{transform:scale(.99)}
.lnum{flex:0 0 38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--line);border-radius:12px;font-weight:900;color:var(--accent2);font-size:18px}
.lnum.done{background:#13351f;color:var(--accent);border-color:#1f5c38}
.ltext{display:flex;flex-direction:column}
.ltext b{font-size:17px}
.ltext small{color:var(--muted);font-size:13px}
.note{background:#192349;border:1px solid #2e3c74;color:#cdd8ff;padding:11px 15px;border-radius:14px;font-size:16px;max-width:450px;line-height:1.4}
.stars{color:#fbbf24;letter-spacing:2px;font-size:14px}

/* ---------- Mi Historia ---------- */
.story-total{
  text-align:center;color:#06281a;font-weight:900;margin:8px auto 14px;
  background:linear-gradient(160deg,#fcd34d,#fbbf24);display:inline-block;
  padding:8px 18px;border-radius:999px;box-shadow:0 8px 20px rgba(251,191,36,.3);
  width:auto;
}
.story-total{display:block}
.story-prompt{background:#192349;border:1px solid #2e3c74;border-radius:14px;padding:11px 15px;font-size:17px;margin-bottom:10px}
.model{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.model .ex{color:var(--muted);font-style:italic;font-size:14px}
.mindmap{width:100%;max-width:430px;display:block;margin:0 auto}
.mindmap line{stroke:#3f4688;stroke-width:2}
.mindmap .subject rect{fill:#3b82f6}
.mindmap .slot circle{fill:var(--card);stroke:#3f4688;stroke-width:2;stroke-dasharray:5 4;cursor:pointer;transition:stroke .2s}
.mindmap .slot.active circle{stroke:var(--accent);stroke-width:3;stroke-dasharray:none}
.mindmap .slot.said circle{fill:#13351f;stroke:#1f5c38;stroke-dasharray:none}
.story-hint{text-align:center;color:var(--muted);font-size:13.5px;margin:8px 0}
.palette{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:450px;margin:0 auto 12px}
.pal{font-size:24px;background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:13px;width:48px;height:48px;cursor:pointer;transition:transform .1s, border-color .2s}
.pal:hover{border-color:var(--accent);transform:translateY(-2px)}
.pal:active{transform:scale(.92)}
.round[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- Temas (logros) ---------- */
.theme-group{margin:22px 0 12px;font-size:18px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:8px}
.tg-count{color:var(--muted);font-size:12px;font-weight:700;background:var(--bg2);padding:3px 9px;border-radius:999px}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:520px){.theme-grid{grid-template-columns:1fr 1fr 1fr}}
.theme-card{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:18px;padding:16px 12px;color:var(--text);cursor:pointer;transition:transform .12s, border-color .2s;box-shadow:0 5px 14px rgba(0,0,0,.22)}
.theme-card[data-id]:hover{border-color:var(--accent);transform:translateY(-3px)}
.theme-card[data-id]:active{transform:scale(.97)}
.theme-card .tlevel{font-size:11px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.5px}
.theme-card .emoji{font-size:36px}
.theme-card .tname{font-weight:800;font-size:17px}
.theme-card .tprog{color:var(--muted);font-size:13px}
.theme-card.tdone{border-color:#1f5c38;background:linear-gradient(165deg,#143524,#10261b)}
.theme-card.locked{opacity:.55;cursor:not-allowed}
.tbar{display:block;width:100%;height:7px;background:var(--bg2);border-radius:999px;overflow:hidden;margin-top:3px}
.tbar span{display:block;height:100%;background:linear-gradient(90deg,#4ade80,var(--accent));border-radius:999px;transition:width .4s}

/* ---------- La Fórmula ---------- */
.forms{display:flex;flex-direction:column;gap:10px;width:100%;max-width:460px}
.formcard{border-radius:14px;padding:12px 14px;border:1px solid var(--line);background:var(--card)}
.formcard.f-aff{border-color:#1f5c38;background:#10261b}
.formcard.f-neg{border-color:#6b2433;background:#2a1217}
.formcard.f-qst{border-color:#234a7a;background:#101f33}
.ftop{display:flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.ficon{font-size:16px}
.ftext{font-size:20px;font-weight:800;margin:4px 0 8px}
.frow{display:flex;gap:8px}
.mini{background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:8px 15px;border-radius:999px;font-size:15px;font-weight:800;cursor:pointer;transition:transform .1s, border-color .2s}
.mini:hover{border-color:var(--accent2)}
.mini:active{transform:scale(.94)}
.mini.listening{animation:pulse 1s infinite}
.form-goal{font-size:19px;font-weight:900}
.form-goal .ficon{font-size:21px}
/* Figuras geométricas reales (conversión de las formas) */
.shape{display:inline-block;width:15px;height:15px;flex:0 0 auto;vertical-align:middle}
.shape.r-s{border-radius:50%;background:#34d399}
.shape.r-v{background:#60a5fa;border-radius:2px}
.shape.r-p{background:#a78bfa;clip-path:polygon(24% 0,100% 0,76% 100%,0 100%)}
.shape.r-x{background:#fbbf24;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.shape.r-r{background:#fb923c;clip-path:polygon(50% 0,0 100%,100% 100%)}
.shape.r-n{width:9px;height:9px;border-radius:50%;background:#fb7185}
.rlegend{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;align-items:center;font-size:12.5px;font-weight:700;margin:4px 0}
.rleg-t{color:var(--muted);font-weight:800}
.rleg{display:inline-flex;align-items:center;gap:5px;color:var(--text)}
.r-s{color:#34d399}.r-v{color:#60a5fa}.r-p{color:#a78bfa}.r-x{color:#fbbf24}.r-r{color:#fb923c}.r-n{color:#fb7185}
.slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:flex-end;min-height:64px;width:100%;max-width:460px;padding:12px;background:var(--bg2);border-radius:16px;border:1px dashed #4a5090}
.slots.ok{border-color:var(--accent);background:#10261b;border-style:solid}
.slotcol{display:flex;flex-direction:column;align-items:center;gap:3px}
.rsym{display:flex;align-items:center;justify-content:center;height:16px}
.slot-word{min-width:52px;height:44px;border-radius:11px;border:2px dashed #4a5090;background:transparent;color:var(--text);font-size:17px;font-weight:700;padding:0 12px;cursor:pointer;transition:transform .1s}
.slot-word.filled{border-style:solid;background:var(--card);cursor:pointer}
.slot-word.filled:active{transform:scale(.95)}
.slot-word.r-s.filled{border-color:#34d399}.slot-word.r-v.filled{border-color:#60a5fa}.slot-word.r-p.filled{border-color:#a78bfa}.slot-word.r-x.filled{border-color:#fbbf24}.slot-word.r-r.filled{border-color:#fb923c}.slot-word.r-n.filled{border-color:#fb7185}
/* Arma la frase — cabecera fija con la estructura de las 3 formas */
.fhead{position:sticky;top:0;z-index:5;background:var(--bg);padding:2px 0 8px;display:flex;flex-direction:column;gap:6px;box-shadow:0 9px 12px -9px rgba(0,0,0,.7)}
#screen>.fhead{animation:none}
.fhead .subbar{margin:0}
.fstruct{display:flex;flex-direction:column;gap:5px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:8px 10px}
.fstruct-title{font-size:13px;font-weight:900;color:var(--accent2)}
.prow{display:flex;align-items:center;gap:8px;border-radius:10px;padding:3px 5px}
.prow.active{background:linear-gradient(160deg,#23314f,#1b2340);outline:2px solid var(--accent)}
.pform{font-size:13px;font-weight:800;flex:0 0 96px}
.pchips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pchip{display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:2px 9px 2px 7px;font-size:11.5px;font-weight:700;color:var(--text)}
.pchip-l{line-height:1}
/* Encabezado de tabla en la pantalla de selección */
.ftable-head{background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin:14px 0 8px}
.ftable-desc{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.4}
/* Tabla rellenable (3 formas) */
.fhint{font-size:14px;color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:8px;text-align:center}
.fhint b{color:var(--text);text-transform:capitalize}
.ftable{display:flex;flex-direction:column;gap:9px;width:100%;max-width:500px}
.trow{display:flex;align-items:center;gap:9px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:9px 11px;transition:background .2s,border-color .2s}
.trow.active{border-color:var(--accent);background:linear-gradient(160deg,#1b2542,#161c38);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.trow.ok{border-color:#27704a;background:#11281c}
.trow.shake{animation:shake .4s}
.tform{flex:0 0 96px;font-size:13.5px;font-weight:800;line-height:1.15}
.tcells{display:flex;flex-wrap:wrap;gap:5px;align-items:flex-end;flex:1}
.tcol{display:flex;flex-direction:column;align-items:center;gap:3px}
.tcell{min-width:44px;height:40px;border-radius:10px;border:2px dashed #3a4070;background:transparent;color:var(--text);font-size:16px;font-weight:700;padding:0 10px;cursor:default;transition:transform .1s}
.trow.active .tcell.act{cursor:default;border-color:#5159a0}
.tcell.filled{border-style:solid;background:var(--card);cursor:pointer}
.tcell.filled:active{transform:scale(.94)}
.tcell.locked{border-style:solid;border-color:#2f8a57;background:#143a27;color:#c9f5dc}
.tcell.future{opacity:.4;border-style:dotted}
.tqm{font-size:22px;font-weight:900;color:var(--accent2);height:40px;display:flex;align-items:center}
.tsh{height:15px}
.tsay{background:none;border:none;cursor:pointer;font-size:17px;flex:0 0 auto;opacity:.8}
.tbank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:46px;margin:10px 0 2px}
.fdone{font-size:18px;font-weight:900;color:var(--accent);text-align:center;margin:10px 0 4px}
input.tcell.tin{min-width:54px;width:72px;border-style:solid;border-color:#5159a0;background:var(--card);color:var(--text);text-align:center;font-family:inherit;outline:none}
input.tcell.tin:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(52,211,153,.22)}
.tbank-l{font-size:12.5px;color:var(--muted);font-weight:700;margin:10px 0 5px;text-align:center}
.drag-clone{position:fixed;z-index:9999;pointer-events:none;opacity:.95;box-shadow:0 12px 26px rgba(0,0,0,.55);transform:scale(1.06)}
.ftrad{font-size:15px;font-weight:700;color:#cfe3ff;background:#16224a;border:1px solid #2e3c74;border-radius:12px;padding:7px 12px;margin:-2px 0 4px;text-align:center}
.ftrad::first-letter{text-transform:uppercase}
/* Panel a demanda con la boca animada */
.fmouth-ov{position:fixed;inset:0;z-index:1000;background:rgba(6,8,24,.74);display:flex;align-items:center;justify-content:center;padding:18px;animation:fadeUp .2s both}
.fmouth{background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:20px;padding:18px 16px;max-width:430px;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.fmouth-sent{font-size:21px;font-weight:900;text-align:center;letter-spacing:.3px}
.fmouth-face{width:100%;display:flex;justify-content:center}
.qmark{font-size:26px;font-weight:800;color:var(--accent2);height:44px;display:flex;align-items:center}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:46px;margin:6px 0 4px}
.bank-empty{color:var(--muted);font-size:13px}
.tile{height:44px;border-radius:11px;border:1px solid var(--line);background:linear-gradient(160deg,#36428a,#283063);color:var(--text);font-size:17px;font-weight:800;padding:0 15px;cursor:pointer;box-shadow:0 4px 0 #14173a;transition:transform .08s, box-shadow .08s}
.tile:hover{filter:brightness(1.08)}
.tile:active{transform:translateY(3px);box-shadow:none}
.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ---------- Mural de vocabulario ---------- */
.vpanel{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:10px;background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.vcur{font-size:22px;min-height:28px;text-align:center;font-weight:700}
.vcontrols{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.vprog{color:#06281a;font-weight:900;font-size:15px;background:linear-gradient(160deg,#fcd34d,#fbbf24);padding:6px 13px;border-radius:999px}
.mini.on{background:var(--accent);color:#06281a;border-color:var(--accent)}
.vboard{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:520px){.vboard{grid-template-columns:repeat(4,1fr)}}
.vtile{display:flex;flex-direction:column;align-items:center;gap:4px;background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:15px;padding:14px 6px;color:var(--text);cursor:pointer;transition:transform .1s, border-color .2s;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.vtile:hover{border-color:var(--accent2);transform:translateY(-2px)}
.vtile:active{transform:scale(.96)}
.vtile .ve{font-size:44px;line-height:1}
.vtile .ve-num{font-size:36px;font-weight:900;color:#cdd8ff}
.vtile .ve-num-sm{font-size:21px;font-weight:900;color:#cdd8ff}
.vtile .vw{font-weight:800;font-size:17px}
.vtile .vf{font-size:13px;color:#9fb4ff;font-weight:700;line-height:1.2}
.vtile .vs{font-size:14px;color:var(--muted);display:none}
.vboard.showes .vs{display:block}
.vtile.sel{border-color:var(--accent2);background:#101f33;box-shadow:0 0 0 2px var(--accent2) inset}
.vtile.learned{border-color:#1f5c38}
.vtile.learned .vw::after{content:" ✓";color:var(--accent)}
.flash-ok{background:#13351f!important;border-color:var(--accent)!important;animation:pop .3s}
.flash-bad{background:#3a1717!important;border-color:var(--bad)!important;animation:shake .35s}

/* ---------- Imágenes realistas de palabras (con respaldo a emoji) ---------- */
.pic{display:inline-flex;align-items:center;justify-content:center;position:relative;line-height:1}
.pic-img{display:block;object-fit:cover;background:#0d1024;border-radius:14px;animation:pop .3s}
.pic-emoji{display:none;line-height:1}
.pic.noimg .pic-img{display:none}
.pic.noimg .pic-emoji{display:inline-flex}

.ve-pic .pic-img{width:80px;height:80px;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.ve-pic.noimg .pic-emoji{font-size:44px}
.fc-pic .pic-img{width:144px;height:144px;border-radius:20px;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.fc-pic.noimg .pic-emoji{font-size:90px}
.opt-pic .pic-img{width:104px;height:104px;border-radius:18px;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.opt-pic.noimg .pic-emoji{font-size:50px}
.big-pic .pic-img{width:150px;height:150px;border-radius:22px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.big-pic.noimg .pic-emoji{font-size:88px}

/* ---------- Responsivo ---------- */
@media(max-width:430px){
  .grid{grid-template-columns:1fr}
  .mode.wide .t{flex-basis:auto}
  .mode.wide .d{flex-basis:100%}
}

/* ---------- Diccionario / buscador ---------- */
.dict-searchbar{position:sticky;top:0;z-index:5;padding:6px 0 12px;background:linear-gradient(180deg,var(--bg) 70%,transparent)}
.dict-searchbar input{width:100%;box-sizing:border-box;font-size:18px;font-weight:700;color:var(--text);
  background:linear-gradient(160deg,var(--card2),var(--card));border:2px solid var(--line);border-radius:999px;
  padding:14px 20px;outline:none;transition:border-color .2s,box-shadow .2s}
.dict-searchbar input::placeholder{color:var(--muted);font-weight:600}
.dict-searchbar input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(52,211,153,.18)}
.dict-tip{color:var(--muted);text-align:center;padding:22px 10px;font-size:15.5px}
.dict-results{display:flex;flex-direction:column;gap:9px}
.dict-row{display:flex;align-items:center;gap:13px;text-align:left;width:100%;
  background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:15px;
  padding:11px 15px;color:var(--text);cursor:pointer;transition:transform .1s,border-color .2s}
.dict-row:hover{border-color:var(--accent);transform:translateX(3px)}
.dict-row:active{transform:scale(.98)}
.dict-row-emoji{font-size:28px;flex:0 0 auto;width:34px;text-align:center}
.dict-row-txt{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.dict-row-txt b{font-size:17px}
.dict-row-es{color:var(--muted);font-size:13.5px}
.dict-row-go{font-size:18px;opacity:.7;flex:0 0 auto}
.dict-detail{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--accent);border-radius:20px;
  padding:18px 16px;margin-bottom:16px;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.dict-en{font-size:30px;font-weight:900;letter-spacing:.3px}
.dict-ipa{color:var(--accent2);font-size:15px;font-weight:700;min-height:18px}
.dict-es{color:var(--muted);font-size:18px}
.dict-ex{color:var(--text);font-style:italic;font-size:15px;opacity:.85;max-width:420px}
.dict-actions{justify-content:center;gap:12px;margin-top:4px}
.dict-src{color:var(--muted);font-size:12.5px;opacity:.85}
#dict-translate-slot{display:flex;justify-content:center;margin:2px 0 12px}
.dict-translate-btn{background:linear-gradient(160deg,#1f7a52,#176343);border-color:#2c9c6a;color:#eafff5}
.dict-translate-btn:hover{border-color:var(--accent);transform:translateY(-1px)}

/* ---------- Accesibilidad: menos movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.05ms!important}
  .mascot{animation:none}
}