/* PFP Grid v11 */

/* ═══ Filters ═══ */
#pfp-filters {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 6px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
    font-family: helvetica, arial, sans-serif;
    font-size: 12px; font-weight: 300;
    text-transform: lowercase;
}
.pfp-filter, .pfp-filter-pfp, .pfp-shuffle {
    border: 1px solid #000;
    background: none; cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: inherit;
    color: #000; text-transform: lowercase;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation;
    -webkit-appearance: none; appearance: none; border-radius: 0;
    padding: 5px 2px; text-align: center;
    white-space: nowrap;
}
.pfp-filter:hover, .pfp-filter.active,
.pfp-filter-pfp:hover, .pfp-filter-pfp.active,
.pfp-shuffle:hover { background: #000; color: #fff; }

.pfp-filter-sep { display: none; }

@media (max-width: 768px) {
    #pfp-filters {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        padding-bottom: 14px; margin-bottom: 14px;
    }
    .pfp-filter, .pfp-filter-pfp, .pfp-shuffle {
        font-size: 10px; padding: 5px 4px;
    }
    .pfp-filter-sep { display: none; }
    .pfp-filter-sep-mid { display: block; }
}

/* ═══ Grid ═══ */
#pfp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 768px) { #pfp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.pfp-grid-item {
    cursor: pointer; background: #fff; position: relative;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
/* Square thumbnail via padding trick (works on all iOS) */
.pfp-grid-thumb {
    width: 100%; padding-bottom: 100%;
    position: relative; overflow: hidden; background: #f2f2f2;
}
.pfp-grid-thumb img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.pfp-grid-title {
    font-family: helvetica, arial, sans-serif;
    font-size: 11px; font-weight: 100;
    text-transform: lowercase; color: #000;
    padding: 8px 2px 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: 0;
}
@media (max-width: 768px) {
    .pfp-grid-title { font-size: 10px; padding: 6px 1px 10px; }
}

/* PFP badge */
.pfp-badge {
    position: absolute; top: 0; left: 0;
    background: #000; color: #fff;
    font-family: helvetica, arial, sans-serif; font-size: 8px;
    font-weight: 300; padding: 3px 7px;
    text-transform: lowercase; z-index: 2;
}

/* ═══ Load more ═══ */
#pfp-loadmore-wrap {
    display: -webkit-flex; display: flex;
    -webkit-justify-content: center; justify-content: center;
    padding: 24px 0;
}
#pfp-loadmore {
    border: 1px solid #000; background: none; padding: 7px 24px;
    cursor: pointer; font-family: helvetica, arial, sans-serif;
    font-size: 12px; font-weight: 300;
    text-transform: lowercase; color: #000;
    -webkit-appearance: none; appearance: none; border-radius: 0;
    touch-action: manipulation;
}
#pfp-loadmore:hover { background: #000; color: #fff; }
#pfp-spinner {
    width: 14px; height: 14px; border: 1px solid #ccc;
    border-top-color: #000; border-radius: 50%;
    animation: pfps 0.5s linear infinite;
}
@keyframes pfps { to { transform: rotate(360deg); } }

/* ═══ Modal ═══ */
#pfp-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    padding: 5vw;
}

#pfp-modal-inner {
    position: relative;
    width: 100%; max-width: 860px;
    background: #fff;
}
#pfp-modal-close {
    position: absolute; top: 8px; right: 12px;
    background: none; border: none; color: #000;
    font-size: 20px; font-weight: 300; cursor: pointer; z-index: 3;
    opacity: 0.3; padding: 8px;
    font-family: helvetica, arial, sans-serif;
    touch-action: manipulation;
}
#pfp-modal-close:hover { opacity: 1; }

#pfp-modal-carousel {
    position: relative; width: 100%;
    padding-bottom: 75%; /* 4:3 */
    background: #fff; overflow: hidden;
}
@media (max-width: 768px) { #pfp-modal-carousel { padding-bottom: 100%; } }

#pfp-carousel { position: absolute; inset: 0; }

.pfp-slide {
    position: absolute; inset: 0;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    opacity: 0; -webkit-transition: opacity 0.15s; transition: opacity 0.15s;
    pointer-events: none;
    padding: 12px; padding-bottom: 28px;
    box-sizing: border-box;
}
.pfp-slide.active { opacity: 1; pointer-events: all; }
.pfp-slide img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.pfp-slide-audio {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    width: 100%; height: 100%;
}
.pfp-slide-audio audio { width: 240px; max-width: 80%; }

/* Arrows */
#pfp-prev, #pfp-next {
    position: absolute; top: 50%;
    -webkit-transform: translateY(-50%); transform: translateY(-50%);
    background: none; border: none; color: #000; font-size: 18px;
    cursor: pointer; z-index: 2; padding: 16px; opacity: 0.15;
    touch-action: manipulation;
    -webkit-transition: opacity 0.12s; transition: opacity 0.12s;
}
#pfp-prev { left: 0; } #pfp-next { right: 0; }
#pfp-prev:hover, #pfp-next:hover { opacity: 0.6; }
#pfp-prev[hidden], #pfp-next[hidden] { display: none; }

/* Dots */
#pfp-dots {
    position: absolute; bottom: 8px; left: 0; right: 0;
    display: -webkit-flex; display: flex;
    -webkit-justify-content: center; justify-content: center;
    gap: 5px; z-index: 2;
}
.pfp-dot {
    width: 5px; height: 5px; background: rgba(0,0,0,0.1);
    border-radius: 50%; cursor: pointer; border: none; padding: 0;
    touch-action: manipulation;
}
.pfp-dot.active { background: rgba(0,0,0,0.45); }

/* Info bar */
#pfp-modal-info {
    padding: 10px 14px;
    font-family: helvetica, arial, sans-serif;
    font-size: 12px; font-weight: 300;
    text-transform: lowercase;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    gap: 8px; border-top: 1px solid #eee; color: #000;
}
#pfp-info-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#pfp-info-name { color: #999; white-space: nowrap; font-size: 11px; }
#pfp-info-link {
    margin-left: auto;
    color: #000; text-decoration: none;
    border: 1px solid #000; padding: 4px 12px;
    font-size: 11px; white-space: nowrap;
    touch-action: manipulation;
    -webkit-transition: background 0.12s, color 0.12s; transition: background 0.12s, color 0.12s;
}
#pfp-info-link:hover { background: #000; color: #fff; }

@media (max-width: 768px) {
    #pfp-modal-info { -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 8px 10px; gap: 4px; }
    #pfp-info-link { padding: 3px 8px; font-size: 10px; }
}

#pfp-grid-empty {
    font-family: helvetica, arial, sans-serif; font-size: 12px; font-weight: 300;
    color: #aaa; text-transform: lowercase; padding: 32px 0;
    text-align: center; grid-column: 1 / -1;
}

/* ═══ Back to top ═══ */
#pfp-top-btn {
    position: fixed; bottom: 24px; right: 24px;
    width: 40px; height: 40px;
    background: #fff; color: #000;
    border: 1px solid #000;
    font-size: 16px; font-weight: 300;
    cursor: pointer; z-index: 9999;
    font-family: helvetica, arial, sans-serif;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation;
    -webkit-appearance: none; appearance: none;
    border-radius: 0;
    opacity: 0.6;
    -webkit-transition: opacity 0.12s; transition: opacity 0.12s;
}
#pfp-top-btn:hover { opacity: 1; }
@media (max-width: 768px) {
    #pfp-top-btn { bottom: 80px; right: 16px; width: 36px; height: 36px; font-size: 14px; }
}