/* Onde fica? Conhecendo o corpo com o Tico (2026-10-26) */
.oc{display:grid;gap:10px;max-width:760px;margin:0 auto}
.oc-cartoes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.oc-cartao{min-height:48px;padding:8px 18px;border-radius:999px;border:3px solid #CDB8EE;background:#EFE7FB;color:#4A2C7A;font-weight:800;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;box-shadow:0 4px 0 #CDB8EE;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.oc-cartao:nth-child(3n+2){border-color:#F3B6C4;background:#FDE7EC;color:#9B1C3A;box-shadow:0 4px 0 #F3B6C4}
.oc-cartao:nth-child(3n+3){border-color:#F2C94C;background:#FFF3C4;color:#8A4B00;box-shadow:0 4px 0 #F2C94C}
.oc-cartao.arrastando{opacity:.35}
.oc-cartao.escolhido{outline:4px solid var(--roxo);outline-offset:2px}
.oc-cartao.balanca{animation:oc-balanca .45s}
.oc-fantasma{position:fixed;z-index:100;transform:translate(-50%,-60%) scale(1.08);pointer-events:none;margin:0;box-shadow:0 10px 24px rgba(60,30,100,.25)}
@keyframes oc-balanca{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.oc-retorno{min-height:2.9em;margin:0;text-align:center;font-size:1.05rem;line-height:1.4}
.oc-retorno .btn{margin-left:6px}
.oc-pergunta{margin:0;text-align:center;font-weight:800;font-size:1.15rem;color:var(--roxo)}
.oc-contador{margin:0;text-align:center;font-weight:700;color:var(--muted,#6B6478)}
.oc-acoes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.oc-fig{--g:96px;position:relative;width:fit-content;margin:0 auto;padding:0 var(--g)}
.oc-corpo{position:relative;height:clamp(340px,calc(100vh - 380px),660px);aspect-ratio:416/1200;cursor:pointer;touch-action:manipulation}
.oc-corpo img{display:block;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.oc-marcas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.oc-brilho{fill:rgba(255,214,90,.32);stroke:#F2B705;stroke-width:8;animation:oc-aparece .5s ease-out}
.oc-ajuda{fill:rgba(181,138,203,.22);stroke:#8E6CC9;stroke-width:8;stroke-dasharray:20 16;animation:oc-pulsa 1.4s ease-in-out infinite}
.oc-dica{fill:#fff;stroke:#8E6CC9;stroke-width:10;opacity:.8;animation:oc-pulsa 2s ease-in-out infinite}
.oc-linha{stroke:#8E6CC9;stroke-width:8;stroke-linecap:round}
.oc-ponto{fill:#8E6CC9;stroke:#fff;stroke-width:6}
@keyframes oc-aparece{from{opacity:0}to{opacity:1}}
@keyframes oc-pulsa{50%{opacity:.35}}
.oc-rotulos{position:absolute;inset:0;pointer-events:none}
.oc-rot{position:absolute;transform:translateY(-50%);width:calc(var(--g) - 6px);padding:4px 6px;border-radius:12px;background:#EFE7FB;border:2px solid #CDB8EE;color:#4A2C7A;font-weight:800;font-size:.68rem;text-align:center;line-height:1.15;animation:oc-aparece .4s ease-out}
.oc-rot.esq{left:0}.oc-rot.dir{right:0}
.oc-pronto .oc-corpo{animation:oc-pula .7s ease-in-out 2}
@keyframes oc-pula{50%{transform:translateY(-10px)}}
#txtInstr.oc-escondido{visibility:hidden}
@media (min-width:700px){.oc-fig{--g:140px}.oc-rot{font-size:.95rem;padding:6px 10px}}
@media (prefers-reduced-motion:reduce){.oc *{animation:none!important}}