/* Pingüino de Tombo: el camino del nido al mar, los avisos del borde y sus textos */
.pg-ui { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* el camino Nido → Mar, sobre la tierra de abajo */
.pg-path {
  position: absolute; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: flex; align-items: center; gap: 10px; padding: 7px 12px 6px;
  border-radius: 999px; background: rgba(74, 42, 18, .42);
}
.pg-end { display: flex; flex-direction: column; align-items: center; flex: none; color: #FFF6E2; }
.pg-end svg { width: 30px; height: 22px; display: block; }
.pg-end small { font-size: 11px; font-weight: 700; line-height: 1; margin-top: 3px; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.pg-track {
  --p: 0; position: relative; flex: 1; height: 6px; margin-bottom: 12px; border-radius: 6px;
  background: radial-gradient(circle, rgba(255, 246, 226, .8) 1.7px, transparent 2.2px) center / 11px 6px repeat-x;
}
.pg-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: 6px; background: #FFC93C; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.pg-me { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 24px; height: 28px; margin: -20px 0 0 -12px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .28)); }
.pg-me svg { width: 100%; height: 100%; display: block; }

/* lo que viene: un aviso en el borde derecho, a la altura de lo que se acerca */
.pg-warns { position: absolute; inset: 0; overflow: hidden; }
.pg-warn {
  position: absolute; right: 16px; top: -21px; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px #E2483F, 0 4px 10px rgba(16, 24, 40, .28);
  display: flex; align-items: center; justify-content: center; will-change: translate, scale;
  transition: translate .18s ease-out;
}
.pg-warn svg { width: 30px; height: 30px; display: block; }
.pg-warn::after { content: ''; position: absolute; right: -12px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 9px solid #E2483F; border-right: 0; }
.pg-warn.in { animation: pg-warn .5s ease-in-out infinite alternate; }
.pg-warn small {
  position: absolute; top: 47px; right: -8px; white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 1;
  color: #fff; background: #E2483F; border-radius: 999px; padding: 3px 8px;
}
@keyframes pg-warn { from { scale: 1; } to { scale: 1.13; } }
@media (prefers-reduced-motion: reduce) { .pg-warn.in { animation: none; } }

/* carteles que tienen que leerse sobre la estepa amarilla */
.pop.pg-doble { color: #fff; text-shadow: 0 2px 0 #9A5B00, 0 0 3px #9A5B00, 0 0 14px rgba(255, 201, 60, .95); }

/* el cartel de la llegada: una píldora oscura que se lee sobre el cielo */
.pg-banner {
  position: absolute; left: 50%; top: 23%; padding: 9px 20px 11px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(14, 28, 52, .82); color: #FFE27A; font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: .01em;
  box-shadow: 0 4px 16px rgba(8, 20, 40, .3); transform: translateX(-50%); animation: pg-banner 2.1s ease-out forwards;
}
@keyframes pg-banner {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(.8); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  22% { transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -12px); }
}

/* el pescado que se escapa (el multiplicador baja) y "¡Al pozo!": píldora oscura, se lee sobre el mar y la estepa */
.pop.pg-miss, .pop.pg-loud {
  padding: 4px 12px 5px; border-radius: 999px; background: rgba(14, 28, 52, .82); box-shadow: 0 3px 10px rgba(8, 20, 40, .25);
  text-shadow: none; line-height: 1.1;
}
.pop.pg-miss { color: #FFB8C6; font-size: 16px; }
.pop.pg-loud { color: #FFE27A; }
/* los puntos sueltos: blancos con borde oscuro, se leen sobre el cielo y la arena */
#fx .pop.pg-pts { text-shadow: 0 2px 0 rgba(14, 28, 52, .75), 0 0 3px rgba(14, 28, 52, .7); }

/* los tres datos del final entran en una línea */
.over-stats:has(.dot.fish) { gap: 6px 10px; font-size: 14px; }
.over-stats:has(.dot.fish) li { gap: 5px; }