/* Load after the screen styles. Keep the existing portrait framing intact. */
.avatar {
  width: 64px;
  height: 64px;
  display: block;
}

.stats-player .avatar,
.picnic-record .avatar,
.team-chip .avatar,
.dual-person .avatar {
  width: 64px;
  height: 64px;
  display: block;
}

.team-chip { border-radius: 38px; }
.team-chip > span,
.dual-person > div,
.picnic-record > span { min-width: 0; }
.picnic-record strong { flex-shrink: 0; }
.reset-children { flex-wrap: wrap; row-gap: 14px; }

/* The two companion choices share a generous, equally tall picture area. */
.picnic-option[data-act="picnic-companion"] {
  min-height: 256px;
  min-width: 0;
  padding: 20px 18px;
  gap: 10px;
}
.picnic-friends {
  height: 148px;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.picnic-friends .avatar {
  width: 112px;
  height: 112px;
}
.farmer-choice {
  width: 160px;
  height: 148px;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  mix-blend-mode: normal;
}

.story-cast .avatar,
.story-dialog .story-cast .avatar,
.story-device-quote .avatar {
  width: 56px;
  height: 56px;
}
.story-cast { column-gap: 10px; row-gap: 10px; }
.story-cast-friend { flex-shrink: 0; }
.story-device-quote p { min-width: 0; overflow-wrap: break-word; }

/* Give the two storybook companions a readable portrait on a tablet. */
.story-dialog .story-cast { font-size: 20px; column-gap: 13px; row-gap: 16px; }
.story-dialog .story-cast-friend { font-size: 18px; gap: 12px; }
.story-dialog .story-cast .avatar,
.story-dialog .story-speaker .avatar { width: 84px; height: 84px; flex: 0 0 84px; }

@media (max-width: 650px) {
  .picnic-option[data-act="picnic-companion"] {
    min-height: 240px;
    padding: 17px 10px;
  }
  .picnic-friends { height: 138px; gap: 8px; }
  .picnic-friends .avatar {
    width: clamp(68px, 13.5vw, 88px);
    height: clamp(68px, 13.5vw, 88px);
  }
  .farmer-choice { width: 150px; height: 138px; max-width: 100%; }

  .game-shell .team-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .team-chip { min-width: 0; justify-content: center; padding: 5px 7px; gap: 6px; }
  .team-chip .avatar,
  .dual-person .avatar { width: 60px; height: 60px; }
  .team-chip > span { text-align: left; }
  .team-chip .leader-badge { display: block; line-height: 1.4; word-break: keep-all; }
  .together-note { grid-column: 1 / -1; text-align: center; line-height: 1.4; }

  .story-cast .avatar,
  .story-dialog .story-cast .avatar,
  .story-device-quote .avatar { width: 48px; height: 48px; }

  .story-dialog .story-cast { font-size: 18px; column-gap: 11px; }
  .story-dialog .story-cast-friend { font-size: 17px; gap: 10px; }
  .story-dialog .story-cast .avatar,
  .story-dialog .story-speaker .avatar { width: 72px; height: 72px; flex-basis: 72px; }
}

@media (max-width: 420px) {
  .picnic-choice[aria-labelledby="picnic-with"] .picnic-option-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .picnic-friends { height: 148px; gap: 12px; }
  .picnic-friends .avatar { width: 100px; height: 100px; }
  .farmer-choice { width: 160px; height: 148px; }

  /* Keep both portraits visible alongside points and the item button. */
  .dual-page .player-hud {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px 90px;
    gap: 5px;
    padding: 10px 8px;
    align-items: end;
  }
  .dual-page .dual-person { min-width: 0; width: 100%; gap: 6px; padding: 5px 6px; }
  .dual-person .avatar { display: block; }
  .dual-page .dual-person h2 { font-size: 18px; line-height: 1.25; }
  .dual-page .dual-person .role { font-size: 11px; line-height: 1.4; }
  .dual-page .score-pill { min-width: 0; width: 100%; padding: 6px 4px; }
  .dual-page .score-pill span,
  .dual-page .score-pill small { font-size: 11px; }
  .dual-page .item-button { min-width: 0; width: 100%; padding: 8px 4px; font-size: 12px; }

  .story-dialog .story-cast-friend { flex-basis: 100%; margin-left: 0; }
  .story-dialog .story-cast .avatar,
  .story-dialog .story-speaker .avatar { width: 64px; height: 64px; flex-basis: 64px; }
  .story-device-quote { flex-direction: column; gap: 10px; }
  .reset-children > span { flex-direction: column; gap: 6px; }
}

@media (max-width: 360px) {
  .dual-page .dual-person { flex-direction: column; gap: 4px; padding: 5px 4px; text-align: center; }
  .dual-page .dual-person .role { margin-top: 3px; }
}