/* profile-achievements.css
 * --------------------------------------------------
 * Advancement-style grid på spillerprofilen
 * v=2026.05.04
 */

.page-profile .achievements-section {
    margin: 1.5rem 0;
}

.page-profile .ach-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: .9rem 1.1rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--profile-accent, #a259ff) 14%, rgba(20,12,32,.92)) 0%,
        rgba(14,8,24,.96) 100%);
    border: 2px solid #000;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--profile-accent, #a259ff) 35%, transparent),
        0 4px 0 #000;
    flex-wrap: wrap;
}
.page-profile .ach-trophy {
    width: 36px;
    height: 36px;
    image-rendering: pixelated;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,.6))
            drop-shadow(0 0 8px rgba(255,207,63,.4));
    flex: 0 0 36px;
}
.page-profile .ach-header h2 {
    margin: 0;
    font-family: 'Minecraft', sans-serif;
    font-size: 1.2rem;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
}
.page-profile .ach-counter {
    font-family: 'Minecraft', sans-serif;
    color: var(--profile-accent, #a259ff);
    font-size: 1.05rem;
    font-weight: 700;
    text-shadow: 1px 1px 0 #000;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.page-profile .ach-next {
    width: 100%;
    margin-top: .35rem;
    font-size: .82rem;
    color: var(--c-text-dim, #aaa);
}
.page-profile .ach-next strong {
    color: var(--profile-accent, #a259ff);
}

/* ---------- Grid ---------- */
.page-profile .ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .75rem;
}

/* ---------- Single tile ---------- */
.page-profile .ach-tile {
    --rare-color: #888;
    --rare-glow:  rgba(0,0,0,0);
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, rgba(20,12,32,.95) 0%, rgba(10,5,20,.98) 100%);
    border: 2px solid #000;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 3px 0 #000;
    display: grid;
    place-items: center;
    cursor: help;
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: visible;
}
.page-profile .ach-tile:hover {
    transform: translateY(-3px);
    z-index: 5;
    box-shadow:
        inset 0 0 0 1px var(--rare-color),
        0 6px 0 #000,
        0 0 18px var(--rare-glow);
}
.page-profile .ach-tile img {
    width: 56%;
    height: 56%;
    image-rendering: pixelated;
    object-fit: contain;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,.6));
    transition: filter .25s ease;
}

/* ---------- Låste ---------- */
.page-profile .ach-tile.is-locked {
    opacity: .35;
}
.page-profile .ach-tile.is-locked img {
    filter: grayscale(1) brightness(.4) drop-shadow(2px 2px 0 rgba(0,0,0,.4));
}
.page-profile .ach-tile.is-locked::after {
    content: "?";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: 'Minecraft', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    text-shadow: 2px 2px 0 #000;
    pointer-events: none;
}

/* ---------- Rarities ---------- */
.page-profile .ach-tile.rarity-common {
    --rare-color: #ececec;
    --rare-glow:  rgba(220,220,220,.4);
}
.page-profile .ach-tile.rarity-rare {
    --rare-color: #5cd1ff;
    --rare-glow:  rgba(92,209,255,.5);
    background: linear-gradient(180deg, rgba(10,30,50,.95) 0%, rgba(5,15,30,.98) 100%);
}
.page-profile .ach-tile.rarity-epic {
    --rare-color: #c87cff;
    --rare-glow:  rgba(200,124,255,.55);
    background: linear-gradient(180deg, rgba(35,15,55,.95) 0%, rgba(15,5,30,.98) 100%);
}
.page-profile .ach-tile.rarity-legendary {
    --rare-color: #ffcf3f;
    --rare-glow:  rgba(255,207,63,.65);
    background: linear-gradient(180deg, rgba(50,35,5,.95) 0%, rgba(20,12,2,.98) 100%);
}
.page-profile .ach-tile.rarity-legendary.is-unlocked {
    box-shadow:
        inset 0 0 0 1px var(--rare-color),
        0 3px 0 #000,
        0 0 18px var(--rare-glow);
    animation: ach-legendary-pulse 2.4s ease-in-out infinite;
}

/* ---------- Progress dot ---------- */
.page-profile .ach-tile-progress {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    height: 4px;
    background: rgba(0,0,0,.6);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.page-profile .ach-tile-progress > i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--rare-color);
    transition: width 1.2s cubic-bezier(.2,.7,.2,1);
}

/* ---------- Tooltip ---------- */
.page-profile .ach-tile-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 180px;
    max-width: 240px;
    padding: .55rem .65rem .6rem;
    background: linear-gradient(180deg, #1a0f2e, #0e0820);
    border: 2px solid #000;
    box-shadow:
        inset 0 0 0 1px var(--rare-color),
        0 4px 0 #000;
    color: #fff;
    font-size: .8rem;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 20;
    text-align: left;
}
.page-profile .ach-tile-tip strong {
    display: block;
    color: var(--rare-color);
    font-family: 'Minecraft', sans-serif;
    font-size: .9rem;
    margin-bottom: .15rem;
    text-shadow: 1px 1px 0 #000;
}
.page-profile .ach-tile-tip .ach-rarity {
    display: inline-block;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--rare-color);
    margin-top: .35rem;
    opacity: .8;
}
.page-profile .ach-tile:hover .ach-tile-tip,
.page-profile .ach-tile:focus-within .ach-tile-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@keyframes ach-legendary-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px var(--rare-color), 0 3px 0 #000, 0 0 14px var(--rare-glow); }
    50%      { box-shadow: inset 0 0 0 1px var(--rare-color), 0 3px 0 #000, 0 0 26px var(--rare-glow); }
}

@media (prefers-reduced-motion: reduce) {
    .page-profile .ach-tile,
    .page-profile .ach-tile.rarity-legendary.is-unlocked,
    .page-profile .ach-tile-progress > i {
        animation: none !important;
        transition: none !important;
    }
}