/* Piñita Bot, la mascota. Cara en la cabecera de la pantalla de inicio; cuerpo completo en la sala online, los créditos y el final de la partida.
 * Compatibilidad con Chromium ~60: sin gap en flexbox, sin min()/max()/clamp(), sin aspect-ratio ni inset. */
.brand-bar { display: flex; align-items: center; justify-content: center; margin: 6px 0 16px; }
.brand-bar h1 { margin: 0; }
.mascot-head { display: block; height: 56px; width: auto; margin-right: 12px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)); }
.brand-bar picture { display: none; }
html.show-mascot .brand-bar picture { display: block; }
.tv-mode .brand-bar { margin: 0.2rem 0 0.8rem; }
.tv-mode .mascot-head { height: 3.6rem; margin-right: 0.8rem; }
.tv-in-game .brand-bar { display: none; }
.mascot-wrap { text-align: center; margin: 14px 0 4px; }
.mascot-body { display: inline-block; height: 180px; width: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.mascot-credits { display: block; height: 150px; margin: 0 auto 10px; }
.mascot-celebrate { display: block; height: 130px; margin: 6px auto 0; animation: pinita-rebote 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes pinita-rebote { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .mascot-celebrate { animation: none; } }
/* Pantallas bajas: el cuerpo completo nunca tapa controles ni texto (se oculta) */
@media (max-height: 700px) { .mascot-wrap, .mascot-credits, .mascot-celebrate { display: none; } }