/* Jogo Encaixe a ferramenta (/ferramentas/encaixe-a-ferramenta, assets/js/encaixe-a-ferramenta.js) */
.ef{ display:flex; flex-direction:column; gap:14px; margin:24px 0 32px; max-width:860px; }
.ef__palco{ position:relative; background:#fff; border-radius:18px; height:440px; overflow:hidden;
  box-shadow:0 6px 24px rgba(23,47,80,.08); transition:box-shadow .2s, outline-color .2s; outline:3px solid transparent; }
.ef__palco canvas{ display:block; width:100%; height:100%; position:absolute; inset:0; cursor:grab; }
.ef__palco--alvo{ outline-color:var(--link); box-shadow:0 6px 28px rgba(10,86,179,.25); }
.ef__hud{ position:absolute; left:0; right:0; top:0; z-index:2; padding:12px 14px; display:flex; flex-wrap:wrap;
  gap:6px 8px; pointer-events:none; }
.ef__hud span{ background:rgba(255,255,255,.92); padding:5px 12px; border-radius:99px; font-size:.85rem;
  font-weight:700; color:var(--azul-800); }
.ef__hud[hidden]{ display:none; }
.ef__tempo{ flex:1 0 100%; height:8px; background:rgba(23,47,80,.12); border-radius:99px; overflow:hidden; padding:0 !important; }
.ef__tempo[hidden]{ display:none; }
.ef__tempo i{ display:block; height:100%; width:100%; background:var(--link); border-radius:99px; }
.ef__pista{ position:absolute; left:0; right:0; bottom:12px; text-align:center; z-index:1; pointer-events:none;
  font-weight:700; color:var(--azul-800); }
.ef__pista:not(:empty){ display:table; margin:0 auto; left:50%; right:auto; transform:translateX(-50%);
  background:rgba(255,255,255,.92); padding:6px 14px; border-radius:99px; font-size:.95rem; }
.ef__tela{ position:absolute; inset:0; z-index:3; background:rgba(255,255,255,.94); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:20px; gap:10px; overflow:auto; }
.ef__tela[hidden]{ display:none; }
.ef__tela h2{ margin:0; font-size:1.5rem; color:var(--azul-800); }
.ef__tela p{ margin:0; max-width:46ch; line-height:1.45; }
.ef__opcao{ display:flex; align-items:center; gap:8px; font-size:.95rem; cursor:pointer; }
.ef__grande{ font-size:2.2rem; font-weight:800; color:var(--azul-800); line-height:1.1; }
.ef__acao{ border:0; background:var(--acao); color:#fff; font:inherit; font-weight:700; padding:12px 22px;
  border-radius:12px; cursor:pointer; transition:transform .15s; }
.ef__acao:hover{ background:var(--acao-hover); }
.ef__acao:active{ transform:scale(.95); }
.ef__acao[hidden]{ display:none; }
.ef__bandeja{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; min-height:132px; }
.ef__card{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; padding:10px 6px;
  background:#fff; border:2px solid var(--cinza-100); border-radius:14px; font:inherit; font-size:.9rem; font-weight:600;
  color:var(--cinza-700); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  box-shadow:0 2px 10px rgba(23,47,80,.06); transition:transform .15s, border-color .15s; }
.ef__card:hover:not(:disabled){ border-color:var(--link); transform:translateY(-3px); }
.ef__card:focus-visible{ outline:3px solid var(--link); outline-offset:2px; }
.ef__card span{ line-height:1.2; }
.ef__card svg{ display:block; max-width:100%; height:auto; }
.ef__card:disabled{ cursor:default; }
.ef__card--pega{ opacity:.35; }
.ef__card--certo{ border-color:#1e8e4e; background:#eef9f2; }
.ef__card--errado{ border-color:#c62828; background:#fdf0f0; }
.ef__fantasma{ position:fixed; left:0; top:0; width:110px; z-index:9999; pointer-events:none; opacity:.95;
  box-shadow:0 10px 28px rgba(23,47,80,.3); border-color:var(--link); }
.ef__feedback{ background:#fff; border-radius:14px; padding:16px; box-shadow:0 2px 12px rgba(23,47,80,.06);
  border-left:5px solid var(--link); animation:ef-pulo .45s cubic-bezier(.3,1.6,.5,1); }
.ef__feedback[hidden]{ display:none; }
.ef__feedback--ok{ border-left-color:#1e8e4e; }
.ef__feedback--erro{ border-left-color:#c62828; }
.ef__feedback h3{ margin:0 0 4px; font-size:1.15rem; color:var(--azul-800); }
.ef__feedback p{ margin:0 0 12px; line-height:1.45; }
.ef__feedback p + .ef__acao{ margin-top:2px; }
@keyframes ef-pulo{ from{ transform:scale(.96); } to{ transform:scale(1); } }
@media (max-width:640px){
  .ef__palco{ height:340px; }
  .ef__palco canvas{ cursor:default; }
  .ef__bandeja{ grid-template-columns:repeat(2,1fr); }
  .ef__tela h2{ font-size:1.25rem; }
}
@media (prefers-reduced-motion:reduce){
  .ef__card, .ef__acao, .ef__feedback{ transition:none; animation:none; }
}