/* ================================
   KÖZÖS ALAP: MINDEN RANKV
   ================================ */

.rankv {
    --border-width: 1px;
    --radius: 4px;

    /* Alap V1-es border színek */
    --media-color-1: #381D6A;
    --media-color-2: #E0D1FF;

    /* Alap háttér változók (V1) */
    --rank-bg-base: #ffbb5c;
    --rank-bg-1: #ffbb5c;
    --rank-bg-2: #ff9b50;
    --rank-bg-3: #e25e3e;
    --rank-bg-4: #c63d2f;

    position: relative;
    box-sizing: border-box;
    padding: 4px;
    text-align: center;

    border-radius: var(--radius);
    border: var(--border-width) solid transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #ffffff;
    font-size: 0.9rem;

    /* alap háttér – felülírható bg classokkal */
    background-color: var(--rank-bg-base, #0a0a12);

    z-index: 0;
}

/* közös small text stílus */
.rankv small {
    font-size: 0.8rem;
    font-weight: 700;
    background-image: linear-gradient(135deg, #5cd12b, #00ff88, #0bff1c);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.rankv small.text_owner {
    background-image: linear-gradient(135deg, #000000, #949c98, #494c49);
}
.rankv small.text_dev {
    background-image: linear-gradient(135deg, #9f9a9a, #c8cecb, #c6c6c6);
}

/* ================================
   V1 – CONIC BORDER (ALAP STÍLUS)
   ================================ */

@property --angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

@keyframes spin {
    to {
        --angle: 1turn;
    }
}

.rankv::before {
    content: "";
    position: absolute;
    inset: calc(var(--border-width) * -1);
    border-radius: inherit;
    border: inherit;

    /* V1-es conic border – media-color alapján */
    background-image: conic-gradient(
        from var(--angle),
        var(--media-color-1) 80%,
        var(--media-color-2) 88%,
        var(--media-color-2) 92%,
        var(--media-color-1) 100%
    );
    background-origin: border-box;

    /* maszk – belső rész átlátszó, csak a gyűrű látszik */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;

    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-clip: content-box, border-box;
    mask-composite: exclude;

    animation: spin 3s linear infinite;

    z-index: -1;
}

/* ----- V1 SZÍN VARIÁCIÓK (media-color alapú) ----- */

/* lila (alap) */
.rankv--purple {
    --media-color-1: #381D6A;
    --media-color-2: #E0D1FF;

    --rank-bg-base: #ffbb5c;
    --rank-bg-1: #ffbb5c;
    --rank-bg-2: #ff9b50;
    --rank-bg-3: #e25e3e;
    --rank-bg-4: #c63d2f;
}

/* arany */
.rankv--vip {
    --media-color-1: #7f5b00;
    --media-color-2: #ffd86b;

    --rank-bg-base: #3b2909;
    --rank-bg-1: #7f5b00;
    --rank-bg-2: #b8860b;
    --rank-bg-3: #e5c469;
    --rank-bg-4: #f5e3a1;
}

/* kék */
.rankv--blue {
    --media-color-1: #005ea8;
    --media-color-2: #7fd4ff;

    --rank-bg-base: #062136;
    --rank-bg-1: #0b4573;
    --rank-bg-2: #1392cf;
    --rank-bg-3: #27b9ff;
    --rank-bg-4: #aee6ff;
}

/* piros – OWNER (V1-es piros border) */
.rankv--owner {
    --media-color-1: #8b1a26;
    --media-color-2: #ff9ba5;

    --rank-bg-base: #2d0509;
    --rank-bg-1: #8b1a26;
    --rank-bg-2: #c4383c;
    --rank-bg-3: #ff6f6f;
    --rank-bg-4: #ffb3b3;
}

/* green – developer V1-es stílusra (ha kell) */
.rankv-board-dev {
    --media-color-1: #057312;
    --media-color-2: #1ae156;
}

/* black – owner alternatíva V1-hez */
.rankv--owner11 {
    --media-color-1: #000000;
    --media-color-2: #333333;
}

/* ================================
   V2 – NEON / REPEATING CONIC BORDER
   (csak a megfelelő variánsokra)
   ================================ */

@property --a {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes a {
    to { --a: 1turn; }
}

/* Ezeken a variánsokon V2-es neon border legyen,
   felülírjuk az alap V1-es conic border-t. */

.rankv--neon::before,
.rankv--purple-blue::before,
.rankv--brown-pastel::before,
.rankv--red-blue-purple::before,
.rankv--light-blue-pink-pastel::before,
.rankv--purple-pink::before,
.rankv--orange-red-maroon::before,
.rankv--gold-orange::before {
    background-image: repeating-conic-gradient(
        from var(--a, 0deg),
        var(--l, #0000 0% 70%, #0000ff7f)
    );
    filter: var(--f, url(#glow-0));
    animation: a 2s linear infinite;
}

/* ----- V2 BORDER SZÍN VARIÁCIÓK (l, f változók) ----- */

/* 2. box – neon jellegű */
.rankv-board-neon {
    --f: url(#glow-1);
    --l: #ff45457f, #00ff997f, #006aff7f, #ff00957f, #ff45457f;

    /* háttér – aranyasabb */
    --rank-bg-base: #3b2909;
    --rank-bg-1: #7f5b00;
    --rank-bg-2: #b8860b;
    --rank-bg-3: #e5c469;
    --rank-bg-4: #f5e3a1;
}

/* 3. box – lila-kék átmenet */
.rankv--purple-blue {
    --l: #0000 0% 35%, #24004619, #3c096c32, #5a189a4b, #7b2cbf64, #9d4edd7f;
}

/* 4. box – barnás / pasztell */
.rankv--brown-pastel {
    --f: url(#glow-1);
    --l: #cb997e7f, #ffe8d67f, #a5a58d7f, #6b705c7f, #cb997e7f;
}

/* 5. box – vörös / kék / lila */
.rankv--red-blue-purple {
    --l: #0000 0%, #f7258520, #7209b740, #3a0ca360, #4361ee7f;
}

/* 6. box – világos kék / rózsaszín / pasztell */
.rankv--light-blue-pink-pastel {
    --f: url(#glow-1);
    --l: #7bdff27f, #b2f7ef7f, #eff7f67f, #f7d6e07f, #f2b5d47f, #7bdff27f;
}

/* 7. box – lila-rózsaszín */
.rankv--purple-pink {
    --l: #0000 0% 85%, #936bff7f 0%, #b892ff7f, #ffc2e27f, #ff90b37f;
}

/* 8. box – narancs / piros / bordó */
.rankv--orange-red-maroon {
    --f: url(#glow-1);
    --l: #7801167f, #f7b5387f, #db7c267f, #d8572a7f, #c32f277f, #7801167f;
}

/* 9. box – arany / narancs */
.rankv--gold-orange {
    --l: #0000 0% 25%, #f3b70019 0%, #faa30032, #e57c044b, #ff620164, #f63e027f 50%;
}

/* ----- V2 HÁTTÉR VARIÁCIÓK ----- */

/* rank developer háttér */
.rankv-bg-dev {
    background-color: #04150f;
    background-image: radial-gradient(at 68% 55%, #12372a 0%, transparent 60%), radial-gradient(at 42% 87%, #299b51 0%, transparent 50%), radial-gradient(at 50% 46%, #adbc9f 0%, transparent 40%), radial-gradient(at 2% 0%, #fbfada 0%, transparent 30%);
}

/* rank bg vip */
.rankv-bg-vip {
    background-color: #6b240c;
    background-image:
        radial-gradient(at 97% 43%, #6b240c 0%, transparent 60%),
        radial-gradient(at 34% 23%, #994d1c 0%, transparent 50%),
        radial-gradient(at 18% 56%, #e48f45 0%, transparent 40%),
        radial-gradient(at 54% 0%, #f5cca0 0%, transparent 30%);
}

/* rank bg owner */
.rankv-bg-owner {
    background:
        radial-gradient(at 85.48% 14.87%, #020202 0px, transparent 50%),
        radial-gradient(at 30.09% 24.87%, #020101 0px, transparent 50%),
        radial-gradient(at 21% 97%, #0d010a 0px, transparent 50%),
        radial-gradient(at 79.33% 81.12%, #0d0404 0px, transparent 50%),
        radial-gradient(at 73% 42%, #0f0f0f 0px, transparent 50%),
        #09203f;
}