/* EGF Portal — Achievement badges & rarity styling */

.badge-tile {
    --rarity-color: #6c757d;
    --rarity-glow: rgba(108, 117, 125, 0.45);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 0.75rem 0.85rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.25) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.6rem;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    height: 100%;
}

.badge-tile:hover {
    transform: translateY(-2px);
    border-color: var(--rarity-color);
    box-shadow: 0 6px 18px var(--rarity-glow);
}

.badge-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: #fff;
    background: var(--rarity-color);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.06), 0 4px 14px var(--rarity-glow);
    margin-bottom: 0.6rem;
    z-index: 1;
}

.badge-icon-shape-shield  { border-radius: 28% 28% 50% 50% / 22% 22% 48% 48%; }
.badge-icon-shape-hex     { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border-radius: 0; }
.badge-icon-shape-star    { clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); border-radius: 0; }

.badge-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: #fff;
    margin-bottom: 0.15rem;
    line-height: 1.2;
}

.badge-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.65);
    margin-bottom: 0.4rem;
    min-height: 2.4em;
    line-height: 1.25;
}

.badge-meta {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.55);
}

.badge-meta .pill {
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

/* Rarity color tokens */
.badge-rarity-common    { --rarity-color: #9aa0a6; --rarity-glow: rgba(154,160,166,0.40); }
.badge-rarity-uncommon  { --rarity-color: #4caf50; --rarity-glow: rgba(76,175,80,0.45); }
.badge-rarity-rare      { --rarity-color: #29b6f6; --rarity-glow: rgba(41,182,246,0.45); }
.badge-rarity-epic      { --rarity-color: #ab47bc; --rarity-glow: rgba(171,71,188,0.50); }
.badge-rarity-legendary { --rarity-color: #ffb300; --rarity-glow: rgba(255,179,0,0.55); }

/* Locked: greyscale + lock overlay */
.badge-locked .badge-icon {
    filter: grayscale(1) brightness(0.55);
    box-shadow: none;
}
.badge-locked .badge-title,
.badge-locked .badge-desc { color: rgba(255,255,255,0.4); }
.badge-locked::after {
    content: "\F47A"; /* bi-lock-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.45);
}

/* Shiny effect for rare+ */
@keyframes badge-shimmer {
    0%   { transform: translate(-30%, -30%) rotate(45deg); opacity: 0; }
    50%  { opacity: 0.55; }
    100% { transform: translate(30%, 30%) rotate(45deg); opacity: 0; }
}
.badge-shiny .badge-icon::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(115deg,
        rgba(255,255,255,0) 35%,
        rgba(255,255,255,0.65) 50%,
        rgba(255,255,255,0) 65%);
    animation: badge-shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
}
.badge-shiny .badge-icon { position: relative; overflow: hidden; }
.badge-shiny .badge-tile-aura {
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg,
        var(--rarity-color), transparent 30%, var(--rarity-color) 60%, transparent 90%);
    opacity: 0.18;
    animation: badge-aura-spin 9s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes badge-aura-spin { to { transform: rotate(360deg); } }
.badge-shiny.badge-rarity-legendary .badge-tile-aura { opacity: 0.32; }

/* Showcase row */
.badge-showcase {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.7rem;
}
@media (max-width: 768px) {
    .badge-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.badge-slot-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 0.6rem;
    color: rgba(255,255,255,0.35);
    font-size: 0.8rem;
}

/* Progress bar for threshold-based badges */
.badge-progress {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    margin-top: 0.45rem;
    overflow: hidden;
}
.badge-progress > span {
    display: block;
    height: 100%;
    background: var(--rarity-color);
    transition: width 0.3s ease;
}

/* Toast for unlocks */
.achievement-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1080;
    background: #111;
    color: #fff;
    border: 1px solid var(--rarity-color, #6c757d);
    border-radius: 0.6rem;
    padding: 0.8rem 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 240px;
    max-width: 360px;
    animation: ach-toast-in 0.25s ease;
}
.achievement-toast .badge-icon { width: 40px; height: 40px; font-size: 1.2rem; margin: 0; }
@keyframes ach-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Friend / chat list bits */
.friend-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.5rem;
    background: rgba(255,255,255,0.02);
}
.friend-card .friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.friend-code-display {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.6rem;
    letter-spacing: 0.18em;
    background: rgba(255,255,255,0.05);
    padding: 0.45rem 0.8rem;
    border-radius: 0.4rem;
    border: 1px dashed rgba(255,255,255,0.2);
    display: inline-block;
}

/* Chat */
.chat-shell { display: grid; grid-template-columns: 280px 1fr; gap: 0.6rem; min-height: 60vh; }
@media (max-width: 768px) { .chat-shell { grid-template-columns: 1fr; } }
.chat-thread-list {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.5rem;
    overflow-y: auto;
    max-height: 70vh;
}
.chat-thread-list a {
    display: flex;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    text-decoration: none;
    color: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.chat-thread-list a.active { background: rgba(41,182,246,0.10); color: #fff; }
.chat-thread-list a:hover { background: rgba(255,255,255,0.04); }
.chat-thread-list .preview { font-size: 0.75rem; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.chat-pane {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.5rem;
    background: rgba(0,0,0,0.25);
    min-height: 60vh;
    max-height: 70vh;
}
.chat-messages { flex: 1; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.chat-msg { max-width: 70%; padding: 0.5rem 0.75rem; border-radius: 0.6rem; background: rgba(255,255,255,0.06); word-wrap: break-word; }
.chat-msg.own { align-self: flex-end; background: linear-gradient(135deg, #1976d2, #29b6f6); color: #fff; }
.chat-msg .meta { font-size: 0.65rem; opacity: 0.7; margin-top: 0.2rem; }
.chat-composer { display: flex; gap: 0.4rem; padding: 0.5rem; border-top: 1px solid rgba(255,255,255,0.06); }
.chat-composer textarea { flex: 1; resize: none; min-height: 38px; max-height: 120px; }