/* C2 — Screen: the Passport (src/ui/screens/passport.js): the chips, one page per chapter, the stamps as a
   grid (2 columns at 320 px, 3 at 390 px), a stamp's back side in the game's modal. */

.screen--passport.is-rerender {
  animation: none;
}

.pp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.pp-head__text p {
  margin: 0;
}

.pp-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pp-chip {
  font-weight: 800;
}

.pp-chip__emoji {
  margin-right: var(--sp-1);
}

.pp-empty {
  margin: 0;
}

.pp-book {
  display: grid;
  gap: var(--sp-4);
}

.pp-page {
  min-width: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 6px solid var(--pp-ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.pp-page__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  color: var(--pp-ink);
}

.pp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sp-3);
}

.pp-grid__cell {
  min-width: 0;
  display: flex;
}

.pp-foot {
  display: flex;
  justify-content: center;
}

/* A stamp's back side (the game's modal). */
.pp-back__body p {
  margin: 0 0 var(--sp-2);
}

.pp-back__did {
  font-size: var(--fs-md);
  font-weight: 800;
}

.pp-back__next {
  font-weight: 800;
  color: var(--accent-700);
}

/* The Logbook's "📘 Passport" button sits beside Back. */
.lb-head .lb-passport {
  margin-left: auto;
}

@media (max-width: 37.5em) {
  .pp-page {
    padding: var(--sp-3);
  }

  .pp-grid {
    gap: var(--sp-2);
  }
}