.misterios{--acc:#1a5fb4;--ok:#1a7f37;--ko:#b3261e;font-family:system-ui,sans-serif;max-width:560px;margin:0 auto;padding:8px}
.misterios button{min-height:44px;min-width:44px;border:2px solid #777;border-radius:8px;background:#fff;font-size:1rem;cursor:pointer}
.misterios button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.misterios .grid{display:grid;gap:2px;margin:10px 0;background:#222;padding:2px;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));width:100%;box-sizing:border-box}
.misterios .cell{border-radius:4px;min-width:0;min-height:0;aspect-ratio:1;font-weight:600;width:100%;padding:0}
.misterios .cell.on{outline:3px solid var(--acc);background:#eef4ff}
.misterios .actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.misterios .words li.done{text-decoration:line-through;color:var(--ok)}
.misterios .opts{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.misterios .opts button.on{outline:3px solid var(--acc)}
.misterios .hint{background:#fff8e1;border-radius:6px;padding:8px}
.misterios .feedback{padding:8px;border-radius:6px}
.misterios .feedback.ok{background:#e9f7ee;color:var(--ok)}
.misterios .feedback.ko{background:#fdeceb;color:var(--ko)}
.misterios .progress{font-size:.9rem;color:#444}
@media (max-width:400px){.misterios .cell{font-size:.9rem}}
@media (prefers-reduced-motion:reduce){.misterios *{transition:none!important}}