* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --accent: #8b5cf6;
    --accent-light: #b794ff;
}

body {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding: 40px 20px;

    font-family: "Outfit", sans-serif;

    background: #050505;

    overflow-x: hidden;

    position: relative;
}

/* Pozadie */

.background {
    position: fixed;
    inset: 0;

    background-image: url("assets/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: -2;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, .55);

    z-index: -1;
}

/* Karta */

.card {
    width: 100%;
    max-width: 1000px;

    padding: 55px;

    border-radius: 32px;

    background: rgba(18, 18, 28, .45);

    border: 1px solid rgba(139, 92, 246, .18);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 0 60px rgba(139, 92, 246, .15),
        inset 0 0 30px rgba(255, 255, 255, .02);

    text-align: center;
}

/* Avatar */

.avatar-container {
    position: relative;

    display: flex;
    justify-content: center;

    margin-bottom: 25px;
}

.avatar-glow {
    position: absolute;

    width: 240px;
    height: 240px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    border: 1px solid rgba(139, 92, 246, .25);

    box-shadow:
        0 0 50px rgba(139, 92, 246, .30),
        inset 0 0 40px rgba(139, 92, 246, .15);
}

.avatar {
    width: 190px;

    position: relative;
    z-index: 2;

    filter: drop-shadow(0 0 15px rgba(139, 92, 246, .35));

    transition: .3s;
}

.avatar:hover {
    transform: translateY(-4px);
}

/* Meno */

.name {
    font-family: "Zen Dots", sans-serif;

    color: white;

    font-size: 4.2rem;

    font-weight: 400;

    letter-spacing: -1px;

    margin-bottom: 10px;

    animation: glowPulse 2s ease-in-out infinite;

    filter:
        drop-shadow(0 0 8px rgba(139,92,246,.5));
}

.nickname {
    color: rgba(255, 255, 255, .22);

    font-size: .85rem;

    font-weight: 500;

    letter-spacing: 5px;

    text-transform: uppercase;

    margin-bottom: 25px;
}

.subtitle {
    color: rgba(255, 255, 255, .50);

    font-size: 14px;

    letter-spacing: 1px;

    margin-bottom: 40px;
}

/* Menu */

.tags-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 14px;
}

.second-row {
    margin-bottom: 35px;
}

.tag-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 220px;
    height: 52px;

    border: none;

    border-radius: 999px;

    background: rgba(255, 255, 255, .05);

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

    color: rgba(255, 255, 255, .85);

    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition: .25s;
}

.tag-btn i {
    color: var(--accent);
}

.tag-btn:hover {
    transform: translateY(-2px);

    background: rgba(139, 92, 246, .12);

    border-color: rgba(139, 92, 246, .35);

    box-shadow:
        0 0 20px rgba(139, 92, 246, .20);
}

.tag-btn.active {
    background: rgba(139, 92, 246, .18);

    border-color: rgba(139, 92, 246, .50);

    color: white;

    box-shadow:
        0 0 20px rgba(139, 92, 246, .25);
}

.tag-btn.active i {
    color: var(--accent-light);
}

/* Info panel */

.info-panel {
    min-height: 220px;

    margin-bottom: 20px;
}

.tab-content {
    display: none;

    padding: 30px;

    text-align: left;

    border-radius: 22px;

    background: rgba(255, 255, 255, .04);

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

    backdrop-filter: blur(12px);

    animation: fadeIn .35s ease;
}

.tab-content.active {
    display: block;
}

.tab-content h3 {
    color: white;

    font-size: 1.4rem;

    margin-bottom: 15px;
}

.tab-content p {
    color: rgba(255, 255, 255, .8);

    line-height: 1.8;
}

/* Discord */

.social-section {
    display: flex;
    justify-content: center;

    margin-top: 20px;
}

.discord-btn {
    display: flex;
    align-items: center;

    gap: 15px;

    width: 280px;

    padding: 18px 20px;

    border: none;

    border-radius: 20px;

    cursor: pointer;

    background: rgba(255, 255, 255, .04);

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

    color: white;

    transition: .25s;
}

.discord-btn:hover {
    transform: translateY(-2px);

    border-color: rgba(139, 92, 246, .35);

    box-shadow:
        0 0 20px rgba(139, 92, 246, .20);
}

.discord-btn i {
    font-size: 28px;

    color: #5865F2;
}

.discord-text {
    display: flex;
    flex-direction: column;

    text-align: left;
}

.discord-title {
    font-size: 13px;

    color: rgba(255, 255, 255, .55);
}

.discord-name {
    font-size: 20px;

    font-weight: 600;

    color: white;
}

/* Animácie */

@keyframes glowPulse {

    0%,100%{
        text-shadow:
            0 0 15px rgba(139,92,246,.4),
            0 0 30px rgba(139,92,246,.2);
    }

    50%{
        text-shadow:
            0 0 25px rgba(139,92,246,.9),
            0 0 50px rgba(139,92,246,.6),
            0 0 80px rgba(139,92,246,.3);
    }

}

@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobil */

@media (max-width:768px) {

    .card {
        padding: 30px;
    }

    .name {
        font-size: 2.5rem;
    }

    .avatar {
        width: 140px;
    }

    .avatar-glow {
        width: 180px;
        height: 180px;
    }

    .tag-btn {
        width: 100%;
        min-width: unset;
    }

    .discord-btn {
        width: 100%;
    }
}
/* Toast */

#toast{
    position:fixed;

    bottom:30px;
    right:30px;

    padding:14px 22px;

    background:rgba(139,92,246,.95);

    color:white;

    font-family:"Outfit",sans-serif;
    font-weight:600;

    border-radius:14px;

    box-shadow:
        0 0 20px rgba(139,92,246,.35);

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .3s ease,
        transform .3s ease;

    pointer-events:none;

    z-index:9999;
}

#toast.show{
    opacity:1;

    transform:translateY(0);
}

#particles{
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -1;

    pointer-events: none;
}
 
/* ===================================== */
/* ENTER SCREEN */
/* ===================================== */

#enterScreen{
    position:fixed;

    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(12px);

    z-index:99999;

    transition:.8s ease;
}

#enterScreen.hidden{
    opacity:0;

    visibility:hidden;

    pointer-events:none;
}

.enter-content{
    text-align:center;

    animation:enterFloat 3s ease-in-out infinite;
}

.enter-content h1{

    font-family:"Zen Dots",sans-serif;

    font-size:5rem;

    color:white;

    margin-bottom:25px;

    text-shadow:
        0 0 20px rgba(139,92,246,.6),
        0 0 60px rgba(139,92,246,.3);
}

.enter-content p{

    color:rgba(255,255,255,.8);

    font-size:1.2rem;

    letter-spacing:3px;

    text-transform:uppercase;

    animation:pulseText 2s infinite;
}

@keyframes pulseText{

    0%,100%{
        opacity:.4;
    }

    50%{
        opacity:1;
    }

}

@keyframes enterFloat{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

}