/* O potinho de curtidas e a Sexta da turma (js/potinho.js) */
.potinhos { margin: 10px 12px; }
.potinhos--varios { display: flex; gap: 10px; margin-inline: 0; padding: 0 12px 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.potinhos--varios::-webkit-scrollbar { display: none; }
.potinhos--varios > * { flex: 0 0 min(280px, 82%); scroll-snap-align: center; }
.pote { flex: none; display: block; overflow: visible; }

.potinho { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 20px; background: var(--rose-soft); }
.potinho .pote { width: 52px; height: 61px; }
.potinho--cheio { background: var(--sun-soft); }
.potinho__texto { flex: 1; min-width: 0; }
.potinho__nome { display: block; font-size: 12px; font-weight: 700; color: var(--rose-ink); overflow-wrap: anywhere; }
.potinho--cheio .potinho__nome { color: var(--sun-ink); }
.potinho__texto b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }

.sexta { padding: 14px; border-radius: 22px; background: var(--sun-soft); }
.sexta__topo { display: flex; align-items: center; gap: 10px; }
.sexta__topo .potinho__nome { color: var(--sun-ink); }
.sexta__bicho { flex: none; width: 46px; height: 46px; }
.sexta__numeros { display: flex; gap: 8px; margin-top: 12px; }
.sexta__numero { flex: 1 1 0; min-width: 0; padding: 10px 4px; border-radius: 16px; text-align: center; }
.sexta__numero b { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.sexta__numero small { display: block; font-size: 11.5px; font-weight: 700; overflow-wrap: anywhere; }
.sexta__numero--ceu { background: var(--sky-soft); color: var(--sky-ink); }
.sexta__numero--lilas { background: var(--lilac-soft); color: var(--lilac-ink); }
.sexta__numero--rosa { background: var(--rose-soft); color: var(--rose-ink); }
.sexta__nota { margin: 10px 2px 0; font-size: 13px; font-weight: 600; color: var(--sun-ink); }

/* o potinho que aparece no canto quando a família curte */
.potinho-voo { position: fixed; right: 14px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-sticker); pointer-events: none; animation: potinho-entra .24s cubic-bezier(.3, .8, .3, 1.4); }
.potinho-voo span { font-size: 13px; font-weight: 700; color: var(--rose-ink); }
.potinho-voo .pote { width: 42px; height: 49px; }
.potinho-voo--pulou .pote { animation: potinho-pula .42s cubic-bezier(.3, .8, .3, 1.5); }
.potinho-voo--some { opacity: 0; transform: translateY(8px); transition: opacity .24s, transform .24s; }
.potinho-voo__coracao { position: fixed; left: 0; top: 0; z-index: 91; width: 28px; height: 28px; color: var(--heart); pointer-events: none; }
@keyframes potinho-entra { from { opacity: 0; transform: translateY(14px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes potinho-pula { 0%, 100% { transform: none; } 40% { transform: translateY(-5px) scale(1.08, .96); } }
@media (prefers-reduced-motion: reduce) { .potinho-voo, .potinho-voo--pulou .pote { animation: none; } }