/* ─── Pearls page ─────────────────────────────────────────────────── */
.pl { --pl-pearl: #2fd6b5; --pl-pearl-deep: #0d6b5b; --pl-line: var(--border); }

.pl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.pl-head h1 { margin: 0; font-size: 1.9rem; letter-spacing: .01em; }
.pl-head p { margin: .2rem 0 0; color: var(--text-secondary); font-size: .9rem; }

/* Headline numbers as one joined strip. */
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--pl-line); border: 1px solid var(--pl-line); border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
.pl-stats > * { background: var(--bg-card); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .2rem; color: inherit; }
.pl-stats > a:hover { background: var(--bg-hover); }
.pl-stats strong { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.pl-stats strong.pl-stat-name { font-size: 1.05rem; display: flex; align-items: center; gap: .45rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-stats strong.pl-stat-name img { width: 22px; height: 22px; border-radius: 5px; image-rendering: pixelated; }
.pl-stats span { font-size: .78rem; color: var(--text-secondary); }

/* Filters */
.pl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.pl-filters input[type="search"] { flex: 1 1 200px; min-width: 160px; }
.pl-filters select { width: auto; }
.pl-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--bg-elevated); border: 1px solid var(--pl-line); }
.pl-seg a { padding: .35rem .8rem; border-radius: 7px; font-size: .85rem; font-weight: 600; color: var(--text-secondary); }
.pl-seg a.is-on { background: var(--bg-card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.pl-clear { font-size: .85rem; color: var(--text-secondary); }
.pl-count { margin: 0 0 .8rem; font-size: .82rem; color: var(--text-muted); }

/* Cards: body render on an ender-pearl backdrop, then the facts. */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.pl-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--pl-line); transition: border-color .15s, transform .15s; }
.pl-card:hover { border-color: color-mix(in srgb, var(--pl-pearl) 45%, var(--pl-line)); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .pl-card:hover { transform: none; } }
.pl-card-art {
    position: relative; height: 190px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
    background:
        radial-gradient(120px 120px at 50% 62%, color-mix(in srgb, var(--pl-pearl) 32%, transparent), transparent 70%),
        linear-gradient(180deg, #0d1f24 0%, #0a1416 100%);
}
.pl-card-art::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40px; background: linear-gradient(180deg, transparent, var(--bg-card)); }
.pl-body { position: relative; z-index: 1; height: 170px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.pl-type, .pl-times { position: absolute; top: .6rem; z-index: 2; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 5px; }
.pl-type { left: .6rem; color: var(--pl-pearl); background: rgba(5, 20, 18, .75); border: 1px solid color-mix(in srgb, var(--pl-pearl) 35%, transparent); }
.pl-times { right: .6rem; color: #f5c542; background: rgba(20, 16, 5, .75); border: 1px solid rgba(245, 197, 66, .35); }

.pl-card-body { padding: .2rem 1rem 1rem; display: flex; flex-direction: column; gap: .55rem; }
.pl-name { font-size: 1.1rem; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-name:hover { color: var(--pl-pearl); }
.pl-duration { display: flex; align-items: baseline; gap: .4rem; }
.pl-duration strong { font-size: 1.3rem; font-weight: 800; color: var(--pl-pearl); }
.pl-duration span { font-size: .8rem; color: var(--text-secondary); }
.pl-facts { margin: 0; display: grid; gap: .3rem; font-size: .85rem; }
.pl-facts > div { display: flex; justify-content: space-between; gap: .6rem; }
.pl-facts dt { color: var(--text-muted); }
.pl-facts dd { margin: 0; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-facts dd a { display: inline-flex; align-items: center; gap: .3rem; color: var(--text); font-weight: 600; }
.pl-facts dd a:hover { color: var(--pl-pearl); }
.pl-facts img { width: 16px; height: 16px; border-radius: 3px; image-rendering: pixelated; }

/* Freed: faded, no pearl glow. */
.pl-card.is-freed .pl-card-art { background: linear-gradient(180deg, #16191d 0%, #101215 100%); }
.pl-card.is-freed .pl-body { filter: grayscale(1) brightness(.75); }
.pl-card.is-freed .pl-duration strong { color: var(--text-secondary); }

@media (max-width: 520px) {
    .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .pl-card-art { height: 150px; }
    .pl-body { height: 135px; }
    .pl-card-body { padding: .1rem .7rem .8rem; }
    .pl-facts { font-size: .78rem; }
}
.pl-filters input[type="search"] { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: .5rem .75rem; font: inherit; font-size: .9rem; }
.pl-filters input[type="search"]:focus { outline: none; border-color: var(--pl-pearl); }