/* Estilo compartilhado dos mini games. Um arquivo para todos os jogos novos. */
:root{
  --ink:#17324d; --muted:#5b7183; --line:#cfe0ea; --card:#fff;
  --brand:#6d28d9; --brand-dark:#5b21b6; --brand-soft:#f3ecff;
  --good:#15803d; --bad:#b42318; --warn:#b45309; --canvas:#f7f5ff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);background:var(--canvas);line-height:1.5}
.wrap{width:min(100% - 1.75rem,720px);margin-inline:auto}
header{padding:14px 0 16px;color:#fff;background:var(--brand);border-radius:0 0 22px 22px}
header a.back{display:inline-flex;align-items:center;min-height:48px;color:#fff;font-weight:800;text-decoration:none}
header a.back:hover{text-decoration:underline}
h1{margin:2px 0 6px;font-size:clamp(1.35rem,6vw,2rem);line-height:1.15}
.meta{margin:0;font-size:.86rem;line-height:1.45;opacity:.96}
main{padding:14px 0 28px}
.bncc{margin:0 0 12px;background:var(--brand-soft);border:1px solid #ddd0f7;border-radius:14px}
.bncc>summary{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;min-height:46px;padding:.5rem .8rem;cursor:pointer;list-style:none}
.bncc>summary::-webkit-details-marker{display:none}
.bncc>summary::after{content:"\25be";margin-left:auto;color:var(--brand-dark);font-size:.9rem}
.bncc[open]>summary::after{content:"\25b4"}
.bncc .code{padding:.14rem .5rem;font-size:.74rem;font-weight:800;color:#fff;background:var(--brand-dark);border-radius:999px}
.bncc summary strong{font-size:.88rem}
.bncc__body{padding:0 .8rem .7rem}
.bncc p{margin:.2rem 0 0;font-size:.86rem;color:#3f2d63}
.bncc .note{margin-top:.45rem;font-size:.78rem;color:#5b4a7a}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800}
.progress{height:12px;margin:10px 0 16px;background:#e6def8;border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:#f59e0b;transition:width .3s}
.card{padding:18px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 6px 18px rgba(23,50,77,.07)}
.prompt{margin:4px 0 16px;font-size:1.2rem;font-weight:800;text-align:center;line-height:1.35}
.hint{margin:0 0 12px;font-size:.9rem;color:var(--muted);text-align:center}
button{font:inherit}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.choices button,.tiles button,.pairs button{min-height:52px;padding:12px 14px;font-weight:700;color:var(--ink);
  background:#f4f8fb;border:2px solid var(--line);border-radius:14px;cursor:pointer;touch-action:manipulation}
.choices button:hover,.tiles button:hover,.pairs button:hover{border-color:var(--brand);background:#fff}
.choices button.ok,.pairs button.ok{color:#fff;background:var(--good);border-color:var(--good)}
.choices button.bad{color:#fff;background:var(--bad);border-color:var(--bad)}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pairs button.sel{border-color:#f59e0b;background:#fef3c7}
.pairs button.done{opacity:.55;cursor:default}
.tiles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.seq{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:52px;margin-bottom:12px;
  padding:10px;background:#f4f8fb;border:2px dashed var(--line);border-radius:14px}
.seq span{padding:.35rem .6rem;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:10px}
.seq small{color:var(--muted)}
.memory{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px}
.memory button{min-height:74px;font-size:1.05rem;font-weight:800;color:#fff;background:var(--brand);
  border:0;border-radius:14px;cursor:pointer}
.memory button.up{color:var(--ink);background:#fff;border:2px solid var(--brand)}
.memory button.done{color:var(--good);background:#dcfce7;border:2px solid var(--good);cursor:default}
.feedback{min-height:30px;padding:8px;font-weight:800;text-align:center;color:var(--good)}
.feedback.bad{color:var(--bad)}
.result{text-align:center}
.result h2{margin:0 0 6px}
.stars{margin:8px 0;font-size:2.2rem;letter-spacing:5px}
.again{width:100%;min-height:52px;margin-top:8px;color:#fff;font-weight:800;background:var(--good);
  border:0;border-radius:14px;cursor:pointer}
.result a,footer a{color:var(--brand-dark);font-weight:800}
footer{padding:6px 0 26px;font-size:.88rem;color:var(--muted);text-align:center}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}