/* ==========================================================
   PÁGINA COLEÇÃO
========================================================== */

.collection-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));

    gap:18px;

    padding-top:8px;

}

.jojo-card.view-only{

    cursor:zoom-in;

}

/* ==========================================================
   VISUALIZADOR DE CARTAS (lupa)
========================================================== */

.viewer-overlay{

    position:fixed;

    inset:0;

    z-index:9700;

    background:rgba(5,5,8,.88);

    backdrop-filter:blur(8px);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:32px;

    opacity:0;

    transition:opacity .22s ease;

}

.viewer-overlay.open{

    opacity:1;

}

.viewer-close{

    position:fixed;

    top:20px;

    right:24px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--panel);

    border:1px solid var(--border);

    color:var(--text);

    font-size:1rem;

    cursor:pointer;

    transition:var(--transition);

    z-index:2;

}

.viewer-close:hover{

    border-color:var(--gold);

    color:var(--gold);

    transform:rotate(90deg);

}

.viewer-inner{

    display:flex;

    gap:34px;

    align-items:flex-start;

    justify-content:center;

    flex-wrap:wrap;

    max-width:100%;

    max-height:100%;

    overflow-y:auto;

    padding:10px;

}

.viewer-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    animation:viewerCardIn .3s ease both;

}

@keyframes viewerCardIn{

    from{

        opacity:0;

        transform:translateY(14px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.viewer-img{

    height:min(56vh, 470px);

    max-width:80vw;

    border-radius:16px;

    box-shadow:0 18px 50px rgba(0,0,0,.65);

    border:1px solid rgba(255,255,255,.08);

    transition:var(--transition);

}

.viewer-card.is-focus .viewer-img{

    box-shadow:
        0 0 0 2px rgba(201,168,79,.55),
        0 18px 50px rgba(0,0,0,.65);

}

.viewer-placeholder{

    height:min(56vh, 470px);

    aspect-ratio:4 / 5;

    border-radius:16px;

    border:2px solid var(--part-color,var(--gold));

    background:
        radial-gradient(circle at 30% 25%,
            color-mix(in srgb, var(--part-color,var(--gold)) 40%, transparent),
            transparent 70%),
        var(--panel);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    text-align:center;

    font-family:"Cinzel",serif;

    font-size:1.3rem;

    color:var(--text);

}

.viewer-card figcaption{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    max-width:340px;

}

.viewer-card-name{

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:1.05rem;

    text-align:center;

}

.viewer-badges{

    display:flex;

    gap:6px;

    flex-wrap:wrap;

    justify-content:center;

}

.viewer-badge{

    font-size:.7rem;

    font-weight:600;

    padding:4px 12px;

    border-radius:999px;

    background:var(--panel-light);

    border:1px solid var(--border);

    color:var(--text-secondary);

}

.viewer-badge-main{

    background:rgba(201,168,79,.15);

    border-color:rgba(201,168,79,.5);

    color:var(--gold);

}

.viewer-badge-verso{

    background:rgba(122,77,255,.15);

    border-color:rgba(122,77,255,.45);

    color:#b7a3ff;

}

.viewer-badge-front{

    background:rgba(76,175,125,.12);

    border-color:rgba(76,175,125,.4);

    color:var(--success);

}