/* Responsive refinements from the complete visual review. */

/* Keep card titles clear of the circular arrow, including the mobile carousel. */
.world-card-copy h3 { padding-right: 44px; }
.card-art > .robot-toy { scale: .9; translate: 0 8px; }

@media (min-width: 761px) and (max-width: 1000px) {
  .world-card h3 { font-size: 23px; padding-right: 33px; }
}

@media (max-width: 760px) {
  .home-worlds h3 { font-size: 27px; padding-right: 36px; }
  .full-worlds h3 { padding-right: 0; }
}

/* Flexible columns prevent a horizontal scrollbar just above the mobile layout. */
@media (min-width: 761px) {
  .world-dialog[open] {
    width: 752px;
    grid-template-columns: minmax(0, 32fr) minmax(0, 43fr);
  }
  .dialog-copy { min-width: 0; }
}

/* Give narrow three-column posters room for both lettering and artwork. */
.show-grid .poster-title { z-index: 4; pointer-events: none; }
@media (min-width: 761px) and (max-width: 1000px) {
  .show-grid .poster-object { scale: .52; bottom: 12px; }
  .show-grid .poster-sticker { top: 47%; width: 42px; height: 42px; font-size: 10px; }
  .show-grid .vault-show .poster-sticker { font-size: 9px; }
}

/* The close control gets its own space on compact show covers. */
@media (max-width: 760px) {
  .poster-detail .poster-sticker { top: 73px; }
}

/* Readable horizontal stamps across common phone widths, not only below 390px. */
@media (max-width: 600px) {
  .passport-stamps { grid-template-columns: 1fr; padding: 20px; gap: 10px; }
  .passport-stamp {
    display: grid;
    grid-template-columns: 53px minmax(0, 1fr);
    text-align: left;
    padding: 16px;
    gap: 4px 14px;
  }
  .pass-badge { grid-row: 1 / 4; margin: 3px 0 0; width: 46px; height: 46px; }
  .passport-stamp > span { font-size: 7px; }
  .passport-stamp h3 { font-size: 25px; margin: 0; }
  .passport-stamp details { font-size: 10px; margin-top: 4px; }
  .passport-stamp summary { font-size: 10px; justify-content: flex-start; }
  .passport-stamp details a { font-size: 10px; }
  .passport-stamp > p { font-size: 10px; margin-top: 4px; }
}

/* Short landscape screens need a height-aware stage and a separate caption area. */
@media (max-height: 500px) {
  .cinema-stage { --cinema-scale: .56; top: 49%; transform-origin: 50% 50%; }
  .cinema-top { top: 12px; }
  .cinema-bottom { bottom: 15px; width: 500px; }
  .cinema-caption { font-size: 20px; }
  .cinema-progress { margin: 8px auto; }
}

@media (max-height: 400px) {
  .cinema-stage { --cinema-scale: .44; }
}

@media (max-height: 320px) {
  .cinema-stage { --cinema-scale: .34; }
}

@media (max-height: 500px) and (max-width: 370px) {
  .cinema-caption { font-size: 17px; }
}