:root{--bg:#3b2e7e;--bg2:#5b47c9;--card:#fff;--ink:#241b4d;--mut:#6c6592;--ok:#2bb673;--ko:#e5484d;--acc:#ffb703;--prof:#2f80ed;
  --r:22px;--sh:0 6px 0 rgba(0,0,0,.18)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--ink);font-size:20px;
  background:linear-gradient(160deg,var(--bg),var(--bg2));background-attachment:fixed;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#app{max-width:980px;margin:0 auto;padding:16px}
.loading{color:#fff;text-align:center;margin-top:30vh}
h1,h2,h3{margin:0 0 10px}
h1{font-size:2rem;color:#fff}
.top{display:flex;align-items:center;gap:12px;color:#fff;margin-bottom:14px}
.top h1{flex:1;margin:0}
.top .who{font-size:2.4rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r);
  padding:14px 22px;font:inherit;font-weight:700;background:var(--acc);color:var(--ink);box-shadow:var(--sh);cursor:pointer;
  min-height:56px;touch-action:manipulation}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.btn.big{font-size:1.5rem;padding:20px 30px;min-height:76px}
.btn.ghost{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.btn.ok{background:var(--ok);color:#fff}
.btn.small{min-height:44px;padding:8px 14px;font-size:.9rem}
.card{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--sh);margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.tile{background:var(--card);border:0;border-radius:var(--r);padding:20px 12px;box-shadow:var(--sh);text-align:center;
  font:inherit;color:var(--ink);cursor:pointer;display:block;width:100%;text-decoration:none;position:relative}
.tile:active{transform:translateY(4px)}
.tile .ico{font-size:3.4rem;display:block}
.tile .name{font-size:1.35rem;font-weight:800;margin-top:4px;display:block}
.tile .sub{color:var(--mut);font-size:.85rem;display:block;margin-top:4px}
.tile.prof{border-bottom:10px solid var(--c)}
.badge{position:absolute;top:10px;right:10px;background:var(--ko);color:#fff;border-radius:999px;min-width:34px;
  padding:3px 10px;font-weight:800;font-size:.95rem}
.bar{height:16px;background:#e8e4fb;border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .4s}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.row>.grow{flex:1;min-width:220px}
.mut{color:var(--mut)}
.hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.streak{font-size:1.2rem;font-weight:800}
.deck{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:#f5f2ff;margin-bottom:10px;
  width:100%;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.deck:active{background:#e8e4fb}
.deck .ico{font-size:2.2rem}
.deck .t{font-weight:800}
.deck .info{flex:1}
.pill{background:var(--acc);border-radius:99px;padding:2px 10px;font-weight:800;font-size:.8rem}
/* sesión */
.q{font-size:2.1rem;font-weight:800;text-align:center;margin:18px 0 8px;line-height:1.3}
.q .blank{display:inline-block;min-width:2.2em;border-bottom:5px solid var(--acc);color:var(--acc);padding:0 6px}
.q .blank.good{color:var(--ok);border-color:var(--ok)}
.q .blank.bad{color:var(--ko);border-color:var(--ko)}
.deckname{text-align:center;color:var(--mut);font-size:.9rem}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-top:18px}
.opt{font:inherit;font-size:1.6rem;font-weight:800;border:0;border-radius:18px;background:#efeaff;color:var(--ink);
  padding:20px 10px;min-height:76px;box-shadow:var(--sh);cursor:pointer;touch-action:manipulation}
.opt:active{transform:translateY(4px)}
.opt.good{background:var(--ok);color:#fff}
.opt.bad{background:var(--ko);color:#fff}
.opt[disabled]{opacity:.9}
.type{display:flex;gap:12px;margin-top:18px}
.type input{flex:1;font:inherit;font-size:1.6rem;padding:14px 16px;border-radius:16px;border:4px solid #d9d2fb;min-width:0}
.type input:focus{outline:none;border-color:var(--bg2)}
.fb{margin-top:18px;border-radius:18px;padding:16px 18px;font-size:1.1rem}
.fb.good{background:#dff7ea;border:3px solid var(--ok)}
.fb.bad{background:#fde5e6;border:3px solid var(--ko)}
.fb b.t{font-size:1.4rem;display:block;margin-bottom:4px}
.big-emoji{font-size:5rem;text-align:center}
.center{text-align:center}
.stars{font-size:3rem;letter-spacing:6px}
label{display:block;font-weight:700;margin:12px 0 6px}
input.txt{font:inherit;font-size:1.3rem;padding:12px 14px;border-radius:14px;border:3px solid #d9d2fb;width:100%}
.err{color:var(--ko);font-weight:700;min-height:1.4em}
table{border-collapse:collapse;width:100%;font-size:.95rem}
td,th{padding:6px 8px;border-bottom:1px solid #e8e4fb;text-align:left}
.spark{display:flex;gap:4px;align-items:flex-end;height:60px}
.spark div{flex:1;background:var(--ok);border-radius:4px 4px 0 0;min-height:2px;position:relative}
.spark div span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:.65rem;color:var(--mut)}
.foot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
@media (max-width:560px){body{font-size:18px}.q{font-size:1.7rem}}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .25s ease-out}