/* Jogo Qual é a classe? (/ferramentas/qual-e-a-classe, assets/js/qual-e-a-classe.js) */
.qc{ display:grid; grid-template-columns:1.1fr 1fr; gap:20px; margin:24px 0 32px; }
.qc__palco{ position:relative; background:#fff; border-radius:18px; min-height:480px;
  box-shadow:0 6px 24px rgba(23,47,80,.08); overflow:hidden; }
.qc__palco[hidden]{ display:none; }
.qc__palco canvas{ display:block; width:100%; height:100%; position:absolute; inset:0; cursor:grab; }
.qc__toast{ position:absolute; left:50%; top:16px; z-index:1; transform:translate(-50%,-30px); opacity:0;
  background:#1e8e4e; color:#fff; padding:8px 16px; border-radius:99px; font-weight:700;
  transition:.35s cubic-bezier(.3,1.6,.5,1); pointer-events:none; white-space:nowrap; }
.qc__toast.on{ transform:translate(-50%,40px); opacity:1; }
.qc__dica{ position:absolute; left:0; right:0; bottom:10px; z-index:1; text-align:center; font-size:.8rem;
  color:var(--cinza-500); pointer-events:none; }

.qc__painel{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.qc__status{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:space-between;
  background:var(--azul-800); color:#fff; border-radius:14px; padding:10px 16px; font-size:.9rem; font-weight:700; }
.qc__seq--quente{ color:#ffd479; }
.qc__pergunta{ margin:0; font-size:1.2rem; line-height:1.35; font-weight:700; color:var(--azul-800); }
.qc__opcoes{ display:grid; gap:8px; }
.qc__opc{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit; font-size:1rem;
  background:#fff; color:var(--cinza-700); border:2px solid var(--cinza-100); border-radius:12px; padding:11px 14px;
  cursor:pointer; transition:transform .15s, border-color .15s; }
.qc__opc:hover:not(:disabled){ border-color:var(--link); }
.qc__opc:active:not(:disabled){ transform:scale(.97); }
.qc__opc:disabled{ cursor:default; }
.qc__letra{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--cinza-100); color:var(--azul-800);
  display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; }
.qc__opc--certa{ border-color:#1e8e4e; background:#eaf7ef; color:#14653a; font-weight:700; }
.qc__opc--certa .qc__letra{ background:#1e8e4e; color:#fff; }
.qc__opc--errada{ border-color:#c62828; background:#fdecec; color:#8e1c1c; animation:qc-tremer .4s; }
.qc__opc--errada .qc__letra{ background:#c62828; color:#fff; }
@keyframes qc-tremer{ 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } }
.qc__expl{ background:#fff; border-left:5px solid var(--link); border-radius:14px; padding:14px 16px;
  box-shadow:0 2px 12px rgba(23,47,80,.06); }
.qc__expl[hidden]{ display:none; }
.qc__veredito{ margin:0; font-weight:800; }
.qc__veredito--ok{ color:#1e8e4e; } .qc__veredito--erro{ color:#c62828; }
.qc__expl p:last-child{ margin:.4em 0 0; line-height:1.5; }
.qc__acao{ border:0; background:var(--acao); color:#fff; font:inherit; font-weight:700;
  padding:12px 18px; border-radius:12px; cursor:pointer; align-self:flex-start; }
.qc__acao:hover{ background:var(--acao-hover); }
.qc__acao[hidden]{ display:none; }
#qc-jogo{ display:flex; flex-direction:column; gap:14px; }
#qc-jogo[hidden], #qc-final[hidden]{ display:none; }
.qc__final{ background:#fff; border-radius:16px; padding:24px 20px; text-align:center;
  box-shadow:0 2px 12px rgba(23,47,80,.06); }
.qc__final h2{ margin:0 0 4px; font-size:1rem; text-transform:uppercase; letter-spacing:.05em; color:var(--cinza-500); }
.qc__grande{ margin:0; font-size:2.4rem; font-weight:800; color:var(--azul-800); line-height:1.1; }
.qc__final p{ margin:.6em 0 0; line-height:1.5; }
.qc__final .qc__acao{ align-self:auto; margin-top:16px; }

.qc__tabela-box{ overflow-x:auto; margin:12px 0 24px; }
.qc__tabela{ width:100%; min-width:520px; border-collapse:collapse; font-size:.95rem; }
.qc__tabela th, .qc__tabela td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--cinza-100); vertical-align:top; }
.qc__tabela th{ background:var(--cinza-100); color:var(--azul-800); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
.qc__tabela td:first-child{ font-weight:800; color:var(--azul-800); white-space:nowrap; }

@media (max-width:820px){
  .qc{ grid-template-columns:1fr; }
  .qc__palco{ min-height:320px; }
  .qc__palco canvas{ cursor:default; }
  .qc__acao{ align-self:stretch; }
}