/* Pipin has his own space; questions, answers and QR codes stay still. */
body[data-role=projection] .live-stage .pipin-stage {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 2px 0;
}

body[data-role=projection] .live-stage .projection-join .pipin-moment {
  display: flex;
  margin: 0;
  filter: drop-shadow(0 6px 15px #b0b8ff42);
}

body[data-role=projection] .pipin-stage .pipin-moment,
body[data-role=projection] .pipin-stage .pipin-moment picture {
  max-width: 100%;
}

body[data-role=projection] .live-stage .projection-join .pipin-moment img {
  width: clamp(174px, 14vw, 204px);
  max-width: 100%;
  height: auto;
}

.pipin-moment picture,
.pipin-moment picture img { transform-origin: 50% 85%; }

@media (prefers-reduced-motion: no-preference) {
  .pipin-moment picture[data-pipin-motion=idle] img { animation: pipin-breathe 4.2s ease-in-out infinite; }
  .pipin-moment picture[data-pipin-motion=miss] img { animation: pipin-miss 740ms ease-in-out both; }
}

.host-stage .game-progress > .pipin-moment { margin: 0 0 0 auto; flex-shrink: 0; }
.host-stage .game-progress > .pipin-moment img,
.no-correct-wait .pipin-moment img { width: 68px; }
.no-correct-wait .pipin-moment { margin: 0; }
.host-finale { display: flex; flex-wrap: wrap; gap: 16px; align-items: start; }
.host-finale > div:first-child { flex: 1 1 220px; min-width: 0; }
.host-finale > .pipin-moment { margin: 0 auto; }
.host-finale > .pipin-moment img { width: 120px; }

body[data-role=projection] .live-finish .finish-heading .pipin-moment img {
  width: clamp(174px, 15vw, 210px);
  max-width: none;
  height: auto;
}

/* The phone keeps Pipin beside the player's name, above the question. */
.play-sheet .player-identity .pipin-moment {
  display: flex;
  width: 80px;
  margin: 0;
  flex: 0 0 80px;
}
.play-sheet .player-identity .pipin-moment img {
  width: 80px !important;
  height: 100px;
}
.play-sheet .player-identity .player-tags { min-width: 0; }

@keyframes pipin-breathe {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(-1.5deg); }
}

@keyframes pipin-miss {
  30% { transform: translateY(-5%) rotate(-6deg); }
  66% { transform: rotate(3deg); }
}

@media (min-width: 701px) and (max-height: 850px) {
  body[data-role=projection] .live-stage .projection-join .pipin-moment img { width: 174px; }
  body[data-role=projection] .live-finish .finish-heading .pipin-moment img { width: 174px; }
}

@media (max-width: 700px) {
  body[data-role=projection] .live-stage .projection-join .pipin-moment img { width: 138px; }
  body[data-role=projection] .live-finish .finish-heading .pipin-moment img { width: 110px; }
}

@media (max-width: 420px) {
  .play-sheet .player-identity .pipin-moment { width: 72px; flex-basis: 72px; }
  .play-sheet .player-identity .pipin-moment img { width: 72px !important; height: 90px; }
  body[data-role=projection] .live-stage .projection-join .pipin-moment img { width: 118px; }
}