/* Ballenazo: estilos propios del juego */

/* El multiplicador con el anillo de la cadena: se vacía mientras no comés y se pone rojo cuando está por cortarse */
.mult.bz { position: relative; isolation: isolate; background: none; box-shadow: none; margin-left: 5px; }
.mult.bz::before, .mult.bz::after { content: ''; position: absolute; border-radius: 999px; z-index: -1; }
.mult.bz::before { inset: -4px; background: conic-gradient(var(--ring, #FFE066) calc(var(--chain, 1) * 1turn), rgba(10, 76, 112, .38) 0); }
.mult.bz::after { inset: 0; background: var(--krill); box-shadow: 0 3px 0 var(--krill-dark); }
.mult.bz.low { --ring: #FF5A3C; }

/* Aviso en el borde derecho: se viene una lancha o una red */
.bz-warn {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #FF5A3C, 0 4px 10px rgba(10, 76, 112, .35);
  display: grid; place-items: center; pointer-events: none; will-change: transform, opacity;
}
.bz-warn svg { width: 30px; height: 30px; animation: bz-warn .55s ease-in-out infinite alternate; }
.bz-warn::after {
  content: ''; position: absolute; right: -11px; top: 50%; margin-top: -7px;
  border-left: 9px solid #FF5A3C; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
@keyframes bz-warn { from { transform: scale(.9); } to { transform: scale(1.1); } }

/* La foto de los turistas: un polaroid que salta */
.pop.bz-foto {
  color: #283A5C; font-size: 20px; text-shadow: none;
  background: #fff; padding: 6px 12px 14px; border-radius: 3px;
  box-shadow: 0 4px 12px rgba(10, 76, 112, .35), 0 0 0 2px #FFE066;
}
.pop.bz-cut { font-size: 15px; color: #E8F6FF; opacity: .9; text-shadow: 0 2px 0 rgba(10, 40, 70, .55); }

/* el puntito de las fotos en los resultados: una camarita */
.dot.foto { background: radial-gradient(circle at 50% 56%, #283A5C 0 3px, #fff 3.5px 4.6px, #FF7A2F 5px); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) { .bz-warn svg { animation: none; } }