/* Jogo "Qual o banho certo?" (/ferramentas/qual-o-banho-certo, assets/js/qual-o-banho-certo.js) */
.qb{ display:grid; grid-template-columns:1.2fr 1fr; gap:20px; margin:24px 0 32px; }
.qb *{ box-sizing:border-box; }
.qb__palco{ position:relative; background:#fff; border-radius:18px; min-height:500px;
  box-shadow:0 6px 24px rgba(23,47,80,.08); overflow:hidden; }
.qb__palco canvas{ display:block; width:100%; height:100%; position:absolute; inset:0; cursor:grab; }
.qb__placar{ position:absolute; left:12px; right:12px; top:12px; z-index:1; display:flex; flex-wrap:wrap; gap:6px; pointer-events:none; }
.qb__placar span{ background:rgba(255,255,255,.92); padding:5px 11px; border-radius:99px; font-size:.82rem;
  font-weight:600; color:var(--cinza-500); }
.qb__placar b{ color:var(--azul-800); }
.qb__selo{ position:absolute; left:50%; bottom:14px; z-index:1; transform:translateX(-50%); max-width:calc(100% - 24px);
  background:rgba(255,255,255,.94); color:var(--azul-800); padding:7px 16px; border-radius:99px; font-weight:700;
  font-size:.95rem; text-align:center; pointer-events:none; }
.qb__selo--ok{ background:#1e8e4e; color:#fff; }
.qb__selo--meio{ background:#e0a100; color:#fff; }
.qb__selo--erro{ background:#c62828; color:#fff; }
.qb__painel{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.qb__rodada{ margin:0; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cinza-500); }
.qb__situacao{ margin:2px 0 0; font-size:1.45rem; line-height:1.2; color:var(--azul-800); }
.qb__texto{ margin:6px 0 0; line-height:1.45; }
.qb__opcoes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.qb__opcoes button{ display:flex; align-items:center; gap:10px; text-align:left; border:2px solid var(--cinza-100);
  background:#fff; border-radius:12px; padding:10px 12px; font:inherit; font-size:.93rem; cursor:pointer;
  color:var(--cinza-700); min-height:52px; transition:transform .15s, border-color .15s; }
.qb__opcoes button i{ flex:none; width:22px; height:22px; border-radius:50%; border:2px solid rgba(0,0,0,.18); }
.qb__opcoes button:hover:not(:disabled){ border-color:var(--link); }
.qb__opcoes button:active:not(:disabled){ transform:scale(.95); }
.qb__opcoes button:disabled{ cursor:default; opacity:.55; }
.qb__opcoes button.qb__certo{ opacity:1; border-color:#1e8e4e; background:#edf8f1; }
.qb__opcoes button.qb__escolhido.qb__ok{ border-color:#1e8e4e; background:#d9f1e2; }
.qb__opcoes button.qb__escolhido.qb__meio{ opacity:1; border-color:#e0a100; background:#fff6dc; }
.qb__opcoes button.qb__escolhido.qb__erro{ opacity:1; border-color:#c62828; background:#fdeaea; }
.qb__resultado{ background:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 2px 12px rgba(23,47,80,.06);
  border-left:5px solid var(--link); animation:qb-pulo .45s cubic-bezier(.3,1.6,.5,1); }
.qb__resultado[hidden]{ display:none; }
.qb__resultado--ok{ border-left-color:#1e8e4e; }
.qb__resultado--meio{ border-left-color:#e0a100; }
.qb__resultado--erro{ border-left-color:#c62828; }
@keyframes qb-pulo{ from{ transform:scale(.96); opacity:.4; } to{ transform:scale(1); opacity:1; } }
.qb__resultado h3{ margin:0; font-size:1.15rem; color:var(--azul-800); }
.qb__resultado p{ margin:.5em 0 0; line-height:1.45; }
.qb__resultado .qb__dica{ font-size:.92rem; color:var(--cinza-500); }
.qb__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; }
.qb__acao:hover{ background:var(--acao-hover); }
.qb__acao[hidden]{ display:none; }
.qb__final{ background:#fff; border-radius:14px; padding:20px; box-shadow:0 2px 12px rgba(23,47,80,.06); }
.qb__final[hidden]{ display:none; }
.qb__nota{ margin:4px 0 8px; font-size:2.2rem; color:var(--azul-800); }
.qb__nota-det{ color:var(--cinza-500); font-size:.92rem; }
.qb__final .qb__acao{ margin-top:6px; }
@media (max-width:820px){
  .qb{ grid-template-columns:1fr; }
  .qb__palco{ min-height:340px; }
  .qb__palco canvas{ cursor:default; }
}
@media (max-width:400px){
  .qb__opcoes{ grid-template-columns:1fr; }
  .qb__situacao{ font-size:1.25rem; }
}