/* Album des cartes postales (js/postcards.js, sous-onglet Album du compagnon) */
.pc { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; border: 2.5px solid var(--ink); overflow: hidden; background: var(--surface-2); box-shadow: 2px 3px 0 var(--ink); }
.pc-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; }
.pc-scene svg { width: 100%; height: 100%; }
.pc-legendary .pc-scene { padding: 0; }
.pc-legendary .pc-scene svg { width: 100%; height: 100%; display: block; }
.pc-motif { position: absolute; right: 4%; top: 5%; width: 34%; height: auto; filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff); }
/* Palettes : le fond de la carte prend la couleur du ciel de la scène */
.pc-dawn { background: linear-gradient(180deg, #c7b3ea, #ffc9c0 70%, #ffe1b0); }
.pc-day { background: linear-gradient(180deg, #8fd0f5, #d8f1ff); }
.pc-golden { background: linear-gradient(180deg, #b4508a, #ff9a5c 60%, #ffc65c); }
.pc-night { background: linear-gradient(180deg, #14123d, #3a2a78); }
.pc-night .pc-scene svg:not(:only-child), .pc-night .pc-scene > svg { filter: brightness(.8) saturate(.9); }
.pc-legendary .pc-scene > svg { filter: none; }
/* Rare : bord holographique qui tourne doucement */
.pc-rare::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: 4px;
  background: conic-gradient(from var(--holo, 0deg), #5cc8ff, #ff9ccf, #ffd84a, #8fe3c4, #5cc8ff); animation: holo 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pc-rare::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 30%, #ffffffaa 45%, #ff9ccf88 52%, #5cc8ff88 58%, transparent 70%) 0 0 / 300% 100%; animation: holoSweep 3.2s ease-in-out infinite; }
/* Légendaire : bord doré et scintillement qui traverse la carte */
.pc-legendary { border: 3px solid #d6900f; box-shadow: 0 0 0 2px var(--ink), 0 0 14px #ffd84aaa, 2px 3px 0 2px var(--ink); }
.pc-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(110deg, transparent 35%, #fff9 48%, transparent 60%) 0 0 / 250% 100%; animation: holoSweep 2.4s ease-in-out infinite; }
.pc-back { display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--surface-2) 0 8px, var(--surface-line) 8px 16px); }
.pc-back span { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink-2); opacity: .7; }

.album-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.album-count { font-family: var(--font-display); font-size: 1.5rem; }
.album-place { margin-top: 14px; }
.album-place h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 1rem; }
.album-place h3 small { color: var(--ink-2); font-weight: 900; }
.album-place.is-done h3::after { content: '✓ complet'; font-family: var(--font-hand); color: var(--good); font-size: 1.2rem; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.album-card { display: grid; gap: 4px; text-align: center; padding: 0; }
.album-card small { font-weight: 900; font-size: .72rem; line-height: 1.1; color: var(--ink); }
.album-card .n { position: absolute; right: -6px; top: -8px; z-index: 3; background: var(--sun); border: 2px solid var(--ink); border-radius: 99px; padding: 0 6px; font-weight: 900; font-size: .75rem; }
.album-card { position: relative; transition: transform .25s var(--jelly); }
.album-card:not([disabled]):active { transform: scale(.94) rotate(-2deg); }
.album-big .pc { width: min(340px, 80vw); margin: 0 auto 12px; rotate: -2deg; }
.album-big { text-align: center; }
.album-big .rar { display: inline-block; font-weight: 900; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; padding: 2px 10px; border-radius: 99px; border: 2px solid var(--ink); background: var(--surface-2); }
.album-big .rar.r-rare { background: linear-gradient(90deg, #8fdcff, #ff9ccf); }
.album-big .rar.r-legendary { background: var(--sun); }
.postcard .pc { width: 100%; rotate: 3deg; }
.postcard-badge { display: inline-block; justify-self: start; font-weight: 900; font-size: .8rem; padding: 2px 10px; border-radius: 99px; border: 2px solid var(--ink); background: var(--mint); rotate: -3deg; }
.postcard-badge.is-dup { background: var(--surface-2); }
.postcard-rewards { text-align: center; font-weight: 900; color: var(--good); margin: 4px 0 0; }

@property --holo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes holo { to { --holo: 360deg; } }
@keyframes holoSweep { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .pc-rare::after, .pc-rare::before, .pc-shine { animation: none; } }