/* Era Passport: summary, seals, the 1977-2014 strip, museum stamps. */
.pp-summary, .pp-section { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.pp-section { margin-top: clamp(36px, 6vw, 64px); }
.pp-sub { margin: 6px 0 18px; color: var(--ink-3); font-size: .98rem; max-width: 62ch; }

.pp-summary { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 16px 32px; align-items: end; padding-bottom: 4px; }
.pp-progress { grid-column: 1; }
.pp-count { margin: 0 0 10px; font: 700 clamp(1.6rem, 1.1rem + 2vw, 2.4rem)/1.05 var(--f-display); }
.pp-meter { height: 8px; border-radius: 4px; background: var(--room-3); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.pp-meter i { display: block; height: 100%; width: 0; background: var(--era); border-radius: 4px; transition: width .5s ease; }
.pp-stats { grid-column: 2; grid-row: 1; display: flex; gap: clamp(14px, 3vw, 30px); margin: 0; }
.pp-stats div { min-width: 0; }
.pp-stats dt { font: 500 .66rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pp-stats dd { margin: 2px 0 0; font: 700 1.5rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.pp-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.btn-danger { color: #ff9b8f; border-color: rgba(255, 107, 94, .35); }
.btn-danger:hover { background: rgba(255, 107, 94, .1); }
.btn-danger-solid { background: #ff6b5e; color: #2a0500; box-shadow: 0 3px 0 #8f2a21; }
.pp-confirm { grid-column: 1 / -1; padding: 14px 16px; border: 1px solid rgba(255, 107, 94, .4); border-radius: var(--r-m); background: rgba(255, 107, 94, .07); }
.pp-confirm p { margin: 0 0 12px; color: var(--ink-2); }
.pp-status { grid-column: 1 / -1; margin: 0; min-height: 1.5em; color: var(--ink-2); font: 400 .9rem var(--f-mono); }
.pp-status.is-bad { color: #ff9b8f; }

/* seals */
.pp-seals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pp-seal { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 14px; text-align: center; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--room-2); }
.pp-seal.is-earned { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--room-2)), var(--room-2)); }
.pp-seal-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-seal-body b { font: 700 .98rem/1.15 var(--f-display); }
.pp-seal-body span { font: 400 .72rem/1.3 var(--f-mono); color: var(--ink-3); }
.seal-n { font: 700 26px var(--f-display); } .seal-t { font: 500 8px var(--f-mono); letter-spacing: .2em; }

/* the strip */
#pp-eras { display: flex; flex-direction: column; gap: 26px; }
.pp-era-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--c); font: 700 1.25rem/1.1 var(--f-display); }
.pp-era-h small { font: 500 .72rem var(--f-mono); letter-spacing: .1em; color: var(--ink-3); }
.pp-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pp-cell { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 112px; padding: 10px 12px 12px; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--room-2); }
.pp-cell.is-empty { background: transparent; border-style: dashed; }
.pp-year { font: 500 .72rem var(--f-mono); letter-spacing: .08em; color: var(--ink-3); }
.pp-game { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-game svg { flex: none; }
.pp-game-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pp-game-t a { font: 700 1rem/1.15 var(--f-display); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.pp-game-t a:hover { text-decoration: underline; }
.pp-game-t span { font: 400 .7rem var(--f-mono); color: var(--ink-3); margin-top: 3px; }
.pp-game.is-earned .pp-game-t span { color: var(--c); }
.pp-ws { margin-top: auto; font: 500 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); opacity: .7; }
.pp-ws-t { font-size: .78rem; color: var(--ink-3); opacity: .8; }
.stamp .st-ini { font: 700 11px var(--f-mono); letter-spacing: .1em; }
.stamp .st-year { font: 700 17px var(--f-display); }
.stamp .st-tag { font: 500 6.5px var(--f-mono); letter-spacing: .22em; }
@media (prefers-reduced-motion: no-preference) { .pp-game.is-earned svg { animation: stampin .5s cubic-bezier(.3, 1.6, .5, 1) 1; } }
@keyframes stampin { from { transform: scale(1.5); opacity: 0; } to { transform: none; opacity: 1; } }

/* museum */
.pp-halls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pp-hall { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px dashed var(--rule-2); border-radius: var(--r-m); }
.pp-hall b { font: 700 .98rem var(--f-display); }
.pp-hall span { font: 400 .72rem var(--f-mono); color: var(--ink-3); }
.pp-hall.is-earned { border-style: solid; border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.pp-hall.is-earned span { color: var(--c); }

@media (max-width: 900px) { .pp-seals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pp-summary { grid-template-columns: 1fr; }
  .pp-stats { grid-column: 1; grid-row: auto; }
  .pp-actions .btn { flex: 1 1 calc(50% - 8px); }
  .pp-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pp-seals { gap: 8px; }
}
@media (max-width: 380px) { .pp-seals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .pp-meter i { transition: none; } }