/* ===== Aventureiros Page ===== */
.avt-page-title {
    color: #ffc000;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
}

.avt-subtitle {
    color: #6a8aa8;
    font-size: 13px;
    margin-bottom: 24px;
}

/* ===== Adventure Card Grid ===== */
.avt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.avt-empty {
    color: #555;
    font-size: 14px;
    text-align: center;
    padding: 60px 20px;
}

/* ===== Adventure Card ===== */
.avt-card {
    background: #000;
    border: 1px solid #1c2a38;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform .2s, border-color .3s;
    position: relative;
    z-index: 1;
}

.avt-card:hover {
    transform: translateY(-3px);
    border-color: var(--rank-color, #3a5570);
    z-index: 10;
}

/* Avatar */
.avt-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 12px;
    border: 3px solid var(--rank-color, #3a5570);
    object-fit: cover;
    display: block;
}

/* Username */
.avt-name {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rank Badge */
.avt-rank-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    color: var(--rank-color, #aaa);
    background: var(--rank-bg, #1a2030);
    border: 2px solid var(--rank-color, #3a5570);
}

.avt-rank {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    min-width: 22px;
    text-align: center;
    color: var(--rank-color, #aaa);
    background: var(--rank-bg, #1a2030);
    margin-bottom: 6px;
}

/* Category rows */
.avt-cat-list {
    margin: 8px 0;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 4px 6px;
    align-items: center;
}

.avt-cat-row {
    display: contents;
}

.avt-cat-name {
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    color: #fff;
    white-space: nowrap;
    padding: 3px 0;
}

.avt-cat-stars {
    font-size: 11px;
    text-align: center;
    min-width: 65px;
    padding: 3px 0;
    white-space: nowrap;
}

.avt-cat-stars .fa-star {
    color: #ffc000;
}

.avt-cat-stars .fa-regular {
    color: #3a3a3a;
}

.avt-cat-rank {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--rank-color, #aaa);
    background: var(--rank-bg, #1a2030);
    text-align: center;
    min-width: 22px;
}

.avt-cat-rank.empty {
    background: #000;
    color: #333;
}

.avt-cat-info {
    position: relative;
    color: #555;
    font-size: 13px;
    text-align: center;
    width: 16px;
    padding: 3px 0;
}

.avt-cat-info:hover {
    color: #ffc000;
}

.avt-cat-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a2030;
    color: #cce0f5;
    font-size: 11px;
    font-weight: 400;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #2a3f55;
    max-width: 200px;
    white-space: normal;
    text-align: center;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
    width: max-content;
}

.avt-cat-info:hover .avt-cat-tooltip {
    display: block;
}

.tooltip-icon {
    color: #555;
    cursor: help;
    position: relative;
    font-size: 13px;
}

.tooltip-icon:hover {
    color: #ffc000;
}

.tooltip-icon[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a2030;
    color: #cce0f5;
    font-size: 11px;
    font-weight: 400;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #2a3f55;
    white-space: nowrap;
    max-width: 200px;
    white-space: normal;
    text-align: center;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

.tooltip-icon[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2a3f55;
    z-index: 10;
}

/* XP Bar */
.avt-xp-wrap {
    margin-top: 8px;
}

.avt-xp-label {
    font-size: 11px;
    color: #6a8aa8;
    margin-bottom: 4px;
}

.avt-xp-bar {
    width: 100%;
    height: 6px;
    background: #0d1520;
    border-radius: 3px;
    overflow: hidden;
}

.avt-xp-fill {
    height: 100%;
    background: var(--rank-color, #3a5570);
    border-radius: 3px;
    transition: width .4s ease;
}

.avt-xp-text {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
}

/* Quest count */
.avt-quests {
    font-size: 11px;
    color: #555;
    margin-top: 6px;
}

/* Commissions status */
.avt-commissions {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

.avt-commissions.open {
    color: #00b86d;
    background: #00684020;
    border: 1px solid #00684040;
}

.avt-commissions.closed {
    color: #664b55;
    background: #1a0c0c20;
    border: 1px solid #3a203040;
}

/* ===== Rank Color Variables ===== */
.avt-rank-F  { --rank-color: #7a8a9a; --rank-bg: #1a1e25; }
.avt-rank-E  { --rank-color: #4a9a5a; --rank-bg: #0f1a12; }
.avt-rank-D  { --rank-color: #4a8ae2; --rank-bg: #0c1525; }
.avt-rank-C  { --rank-color: #a06ae2; --rank-bg: #160e25; }
.avt-rank-B  { --rank-color: #e2a02a; --rank-bg: #1a1508; }
.avt-rank-A  { --rank-color: #e24a4a; --rank-bg: #1a0c0c; }
.avt-rank-S  { --rank-color: #ff6a2a; --rank-bg: #1a1008; }
.avt-rank-SS { --rank-color: #ff3a8a; --rank-bg: #1a0818; }
.avt-rank-SSS { --rank-color: #ffd700; --rank-bg: #1a1508; }

/* ===== Shared Rank Colors (used in CLT Quest cards too) ===== */
.cltq-nv-f   { color: #7a8a9a; }
.cltq-nv-e   { color: #4a9a5a; }
.cltq-nv-d   { color: #4a8ae2; }
.cltq-nv-c   { color: #a06ae2; }
.cltq-nv-b   { color: #e2a02a; }
.cltq-nv-a   { color: #e24a4a; }
.cltq-nv-s   { color: #ff6a2a; }
.cltq-nv-ss  { color: #ff3a8a; }
.cltq-nv-sss { color: #ffd700; }

/* ===== SSS Glow ===== */
.avt-rank-SSS .avt-rank,
.avt-card.avt-rank-SSS .avt-avatar {
    animation: sssGlow 2s ease-in-out infinite alternate;
}

@keyframes sssGlow {
    from { box-shadow: 0 0 6px rgba(255, 215, 0, 0.3); }
    to   { box-shadow: 0 0 16px rgba(255, 215, 0, 0.6); }
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .avt-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Social Icons ===== */
.avt-social {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.avt-social-icon {
    position: relative;
    font-size: 16px;
    cursor: pointer;
    transition: color .2s;
}

.avt-social-twitter { color: #1da1f2; }
.avt-social-instagram { color: #e4405f; }
.avt-social-behance { color: #1769ff; }
.avt-social-artstation { color: #13aff0; }
.avt-social-discord { color: #5865f2; }
.avt-social-email { color: #ea4335; }

.avt-social-icon:hover { color: #fff; }

.avt-social-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a2030;
    color: #cce0f5;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}

.avt-social-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a2030;
}

.avt-social-icon.show-tooltip .avt-social-tooltip {
    display: block;
}

/* ===== Portfolio Button ===== */
.avt-portfolio-btn {
    background: linear-gradient(135deg, #1a2030, #0d1520);
    border: 1px solid #3a5570;
    color: #cce0f5;
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, color .2s;
}

.avt-portfolio-btn:hover {
    border-color: #ffc000;
    color: #ffc000;
}

/* ===== Portfolio Lightbox ===== */
.pf-lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pf-lightbox-content {
    background: #0d1520;
    border: 1px solid #1c2a38;
    border-radius: 12px;
    width: min(720px, 90vw);
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pf-lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #1c2a38;
    gap: 12px;
}

.pf-lb-cats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pf-lb-cat {
    background: #1a1e25;
    border: 1px solid #2a3f55;
    color: #8ab;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, color .2s;
}

.pf-lb-cat.active,
.pf-lb-cat:hover {
    border-color: #ffc000;
    color: #ffc000;
}

.pf-lb-close {
    background: none;
    border: none;
    color: #6a8aa8;
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    font-family: inherit;
    line-height: 1;
}

.pf-lb-close:hover { color: #fff; }

.pf-lb-body {
    padding: 16px;
    overflow-y: auto;
}

/* ---- Grid view ---- */
.pf-lb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.pf-lb-grid-item {
    background: #1a1e25;
    border: 1px solid #2a3f55;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s;
    display: flex;
    flex-direction: column;
}

.pf-lb-grid-item:hover {
    border-color: #ffc000;
}

.pf-lb-grid-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pf-lb-grid-title {
    padding: 4px 6px;
    font-size: 10px;
    color: #8ab;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Detail view ---- */
.pf-lb-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pf-lb-back {
    align-self: flex-start;
    background: none;
    border: 1px solid #2a3f55;
    color: #8ab;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, color .2s;
}

.pf-lb-back:hover {
    border-color: #ffc000;
    color: #ffc000;
}

.pf-lb-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(720px, 90vw);
    max-height: 80vh;
}

.pf-lb-image-wrap img {
    max-width: 100%;
    max-height: 80vh;
    min-width: 400px;
    min-height: 400px;
    object-fit: contain;
    border-radius: 6px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pf-lb-img-title {
    text-align: center;
    padding: 4px 16px 8px;
    color: #aaa;
    font-size: 13px;
    font-weight: 600;
}