/* ── Botão "Ver diagramas" ────────────────────────────────── */
.diag-btn{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  width:100%;margin-top:.6rem;
  background:linear-gradient(180deg,#2a2118,#1a140e);
  border:2px solid #6b5324;border-radius:13px;
  color:#F5A623;font-family:var(--font-body);font-size:.78rem;font-weight:800;letter-spacing:.03em;
  padding:.62em;cursor:pointer;box-shadow:3px 3px 0 #100c08;transition:all .12s;
}
.diag-btn:hover{background:linear-gradient(180deg,#332718,#20180e);border-color:#8a6a2e}
.diag-btn:active{transform:scale(.975);filter:brightness(.9)}
.diag-btn:focus{outline:none}

/* ── A janelinha ──────────────────────────────────────────── */
.diag-ov{
  position:fixed;inset:0;z-index:8500;
  background:rgba(0,0,0,.82);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;animation:diagFade .18s ease;
}
.diag-painel{
  width:100%;max-width:400px;max-height:100%;overflow-y:auto;
  background:#1e1e1e;border:3px solid #2a2a2a;border-radius:22px;
  padding:.85rem .85rem .9rem;box-shadow:5px 5px 0 #151515;
  animation:diagSobe .22s cubic-bezier(.2,.9,.3,1);
}
.diag-painel.wide{max-width:460px}
@keyframes diagFade{from{opacity:0}to{opacity:1}}
@keyframes diagSobe{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.diag-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;padding:0 .15rem}
.diag-tit{
  font-size:.68rem;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:.13em;flex:1;
}
.diag-x{
  flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:#262626;border:2px solid #3a3a3a;border-radius:9px;
  color:#bbb;font-family:var(--font-body);font-size:15px;font-weight:700;
  cursor:pointer;line-height:1;transition:all .12s;
}
.diag-x:hover{background:#333;color:#fff;border-color:#555}
.diag-x:active{transform:scale(.94)}
.diag-x:focus{outline:none}

/* ── Cartões: mesmo azul dos botões de resposta ───────────── */
.diag-grid{display:grid;gap:.6rem}
.diag-grid-2{grid-template-columns:1fr 1fr}
/* Se sobrar um cartao sozinho na ultima linha (7 acordes dos Campos), centraliza */
.diag-grid-2>.diag-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - .3rem)}
.diag-card{
  background:linear-gradient(180deg,#1e2a42 0%,#111827 100%);
  border:3px solid #2a3a55;border-radius:16px;
  padding:.5rem .35rem .45rem;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  box-shadow:4px 4px 0 #0a0f1a;
}
.diag-cifra{
  font-size:1.05rem;font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1;
  text-shadow:0 1px 0 rgba(0,0,0,.8);
}
.diag-card svg{width:100%;height:auto;display:block}

.diag-card.correct{background:#1a3d1a;border-color:#22c55e;box-shadow:4px 4px 0 #111}
.diag-card.correct .diag-cifra{color:#4ade80}
.diag-card.wrong{background:#3d1a1a;border-color:#ef4444;box-shadow:4px 4px 0 #111}
.diag-card.wrong .diag-cifra{color:#f87171}
.diag-card.dim{opacity:.28;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .diag-ov,.diag-painel{animation:none}
  .diag-btn,.diag-x{transition:none}
}