/* ============================================================
   RAME AVATAR - inele animate CSS/SVG in jurul avatarului
   Nu modifica avatarul (imaginea) - doar suprapune un inel/efect.
   ============================================================ */

.avatar-rama-holder{
    position:relative;
    display:inline-block;
    line-height:0;
}

/* avatarul in sine ramane cel real (get_avatar) - fortam doar
   colturile rotunjite ca inelul sa se potriveasca vizual cu un cerc,
   indiferent daca sablonul original avea sau nu rounded-circle */
.avatar-rama-holder > .avatar{
    position:relative;
    z-index:2;
    border-radius:50%;
    overflow:hidden;
}

.avatar-rama-ring{
    position:absolute;
    inset:-6px;
    display:block;
    border-radius:50%;
    z-index:1;
    pointer-events:none;
}

.avatar-rama-holder[data-rama-size="sm"] .avatar-rama-ring{ inset:-4px; }
.avatar-rama-holder[data-rama-size="md"] .avatar-rama-ring{ inset:-6px; }
.avatar-rama-holder[data-rama-size="lg"] .avatar-rama-ring{ inset:-7px; }
.avatar-rama-holder[data-rama-size="xl"] .avatar-rama-ring{ inset:-9px; }

.avatar-rama-particule{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
}

/* fiecare particula = 2 niveluri: <i> pozitioneaza fix punctul din jurul
   cercului (rotate+translate, neanimat), <b> e forma vizibila, cu propria
   animatie locala (puls/plutire/cadere) care nu intra in conflict cu pozitia */
.avatar-rama-particule i{
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
}

.avatar-rama-particule i b{
    position:absolute;
    top:0;
    left:0;
    display:block;
    font-style:normal;
    line-height:1;
}

/* raza (in px) de la centrul avatarului la care graviteaza particulele,
   scalata pe marimea avatarului */
.avatar-rama-holder[data-rama-size="sm"] .avatar-rama-particule{ --rama-r:22px; }
.avatar-rama-holder[data-rama-size="md"] .avatar-rama-particule{ --rama-r:28px; }
.avatar-rama-holder[data-rama-size="lg"] .avatar-rama-particule{ --rama-r:33px; }
.avatar-rama-holder[data-rama-size="xl"] .avatar-rama-particule{ --rama-r:48px; }


/* ramaFocRotire - keyframe reutilizat de multe alte rame (Mercury, Oil
   Slick, Vortex, Lightning, Orbit, etc.) - NU sterge, desi rama 'Foc'
   originala (metal/elemental) care l-a introdus a fost eliminata */
@keyframes ramaFocRotire{
    to{ transform:rotate(360deg); }
}


/* ============================================================
   ROMANTIC: Romantica / Love
   ============================================================ */

.avatar-rama-ring.rama-romantica{
    border:3px solid #ff9ec7;
    box-shadow:0 0 8px rgba(255,120,170,.65);
    animation:ramaRomanticaGlow 2.6s ease-in-out infinite;
}

@keyframes ramaRomanticaGlow{
    0%,100%{ box-shadow:0 0 5px rgba(255,120,170,.45); }
    50%{ box-shadow:0 0 11px rgba(255,160,200,.85); }
}

.avatar-rama-particule.rama-romantica-particule i b{
    width:8px;height:8px;
    margin:-6px 0 0 -4px;
    color:#ff5c8a;
    font-size:10px;
    text-align:center;
    animation:ramaInimaPluteste 3s ease-in-out infinite;
}

.avatar-rama-particule.rama-romantica-particule i b::before{
    content:"♥";
}

@keyframes ramaInimaPluteste{
    0%,100%{ transform:translateY(0px); opacity:.6; }
    50%{ transform:translateY(-6px); opacity:1; }
}

.avatar-rama-particule.rama-romantica-particule i:nth-child(1){ transform:rotate(30deg) translateY(calc(var(--rama-r) * -1)); }
.avatar-rama-particule.rama-romantica-particule i:nth-child(2){ transform:rotate(120deg) translateY(calc(var(--rama-r) * -1)); }
.avatar-rama-particule.rama-romantica-particule i:nth-child(3){ transform:rotate(210deg) translateY(calc(var(--rama-r) * -1)); }
.avatar-rama-particule.rama-romantica-particule i:nth-child(4){ transform:rotate(300deg) translateY(calc(var(--rama-r) * -1)); }
.avatar-rama-particule.rama-romantica-particule i:nth-child(1) b{ animation-delay:0s; }
.avatar-rama-particule.rama-romantica-particule i:nth-child(2) b{ animation-delay:.7s; }
.avatar-rama-particule.rama-romantica-particule i:nth-child(3) b{ animation-delay:1.4s; }
.avatar-rama-particule.rama-romantica-particule i:nth-child(4) b{ animation-delay:2.1s; }

.avatar-rama-ring.rama-love{
    border:3px solid #ff3b5c;
    box-shadow:0 0 8px rgba(255,59,92,.75);
    animation:ramaHeartbeat 1.2s ease-in-out infinite;
}

@keyframes ramaHeartbeat{
    0%,100%{ transform:scale(1); box-shadow:0 0 6px rgba(255,59,92,.55); }
    20%{ transform:scale(1.08); box-shadow:0 0 12px rgba(255,59,92,1); }
    35%{ transform:scale(1); box-shadow:0 0 6px rgba(255,59,92,.55); }
    50%{ transform:scale(1.12); box-shadow:0 0 14px rgba(255,80,110,1); }
    65%{ transform:scale(1); box-shadow:0 0 6px rgba(255,59,92,.55); }
}


/* rama-galaxy a devenit shader WebGL (rama-galaxy.js) - vezi blocul
   ".avatar-rama-canvas.rama-galaxy-canvas" mai jos, langa Lava
   (Noapte / Dark, care erau in acest bloc COSMIC, au fost eliminate) */


/* ============================================================
   SPECIALE (premium) - Blood Moon. Cumparabila de oricine, doar mai
   scumpa - categoria 'special' din catalog, sectiune separata in colectie.
   ============================================================ */

.avatar-rama-bm-glow{
    position:absolute;
    inset:-24%;
    border-radius:50%;
    opacity:.65;
    filter:blur(40px);
    z-index:-1;
    background:radial-gradient(circle,rgba(185,28,28,.45),rgba(69,10,10,.38) 50%,transparent 74%);
    animation:ramaNeonPuls 5s ease-in-out infinite;
}

.avatar-rama-bm-svgwrap{
    position:absolute;
    inset:-18%;
    animation:ramaNeonPuls 6s ease-in-out infinite;
}

.avatar-rama-bm-corona{
    animation:ramaNeonPuls 4s ease-in-out infinite;
}

.avatar-rama-holder .avatar-rama-ring.rama-bloodmoon{
    inset:-3px;
    background:linear-gradient(135deg,#0c0a09,#450a0a,#0c0a09);
    opacity:.95;
}

.avatar-rama-bm-star{
    position:absolute;
    border-radius:50%;
    animation:ramaPixelDustPuls 3.5s ease-in-out infinite;
}

.avatar-rama-holder .avatar-rama-ring.rama-comet{
    inset:-3px;
    overflow:hidden;
    background:#0f172a;
}

.avatar-rama-ring.rama-comet::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:conic-gradient(transparent 0%,transparent 55%,#0ea5e9 72%,#7dd3fc 86%,#fff 94%,transparent 100%);
    animation:ramaFocRotire 1.4s linear infinite;
}

.avatar-rama-const-glow{
    position:absolute;
    inset:-12px;
    border-radius:50%;
    background:rgba(99,102,241,.2);
    filter:blur(40px);
    z-index:-1;
    animation:ramaNeonPuls 5s ease-in-out infinite;
}

.avatar-rama-const-svgwrap{
    position:absolute;
    inset:-8px;
    animation:ramaFocRotire 22s linear infinite;
}

.avatar-rama-const-path{
    animation:ramaAuroraHue 5s linear infinite;
}

.avatar-rama-holder .avatar-rama-ring.rama-constellation{
    inset:-2px;
    background:linear-gradient(135deg,#818cf8,#a5f3fc,#a78bfa);
    opacity:.9;
}

.avatar-rama-const-star{
    position:absolute;
    border-radius:50%;
    animation:ramaPixelDustPuls 2s ease-in-out infinite;
}

.avatar-rama-holder .avatar-rama-ring.rama-hologram{
    inset:-3px;
    background:linear-gradient(135deg,#67e8f9,#2dd4bf,#06b6d4);
    animation:ramaAuroraHue 4s linear infinite;
}

.avatar-rama-ring.rama-hologram::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:50%;
    background:rgba(34,211,238,.2);
    filter:blur(12px);
    z-index:-1;
    animation:ramaAuroraHue 4s linear infinite;
}

.avatar-rama-hologram-scan{
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,255,220,.07) 2px,rgba(0,255,220,.07) 3px);
    animation:ramaLightningFlicker 4s step-end infinite;
}

.avatar-rama-ma-glow{
    position:absolute;
    inset:-24%;
    border-radius:50%;
    opacity:.7;
    filter:blur(40px);
    z-index:-1;
    background:radial-gradient(circle,rgba(153,27,27,.52),rgba(69,10,10,.52) 46%,rgba(15,23,42,.16) 68%,transparent 78%);
    animation:ramaNeonPuls 3.2s ease-in-out infinite;
}

.avatar-rama-ma-svgwrap{
    position:absolute;
    inset:-18%;
    animation:ramaNeonPuls 3.2s ease-in-out infinite;
}

.avatar-rama-ma-ringwrap{
    position:absolute;
    inset:-5%;
    animation:ramaFocRotire 24s linear infinite;
}

.avatar-rama-holder .avatar-rama-ring.rama-maliceaura{
    inset:-3px;
    background:linear-gradient(135deg,#450a0a,#7f1d1d,#c2410c);
    opacity:.95;
}

.avatar-rama-ma-spark{
    position:absolute;
    clip-path:polygon(50% 0%,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0% 50%,44% 44%);
    animation:ramaPixelDustPuls 2.2s ease-in-out infinite;
}

.avatar-rama-om-glow{
    position:absolute;
    inset:-24%;
    border-radius:50%;
    opacity:.7;
    filter:blur(40px);
    z-index:-1;
    background:radial-gradient(circle,rgba(124,58,237,.36),rgba(8,47,73,.28) 42%,rgba(2,6,23,.18) 68%,transparent 78%);
    animation:ramaNeonPuls 4.8s ease-in-out infinite;
}

.avatar-rama-om-svgwrap{
    position:absolute;
    inset:-20%;
    animation:ramaNeonPuls 3.6s ease-in-out infinite;
}

.avatar-rama-om-ringwrap{
    position:absolute;
    inset:-7%;
    animation:ramaFocRotire 26s linear infinite;
}

.avatar-rama-holder .avatar-rama-ring.rama-obsidianmantle{
    inset:-3px;
    background:linear-gradient(135deg,#020617,#2e1065,#155e75);
    opacity:.95;
}

.avatar-rama-om-clawswrap{
    position:absolute;
    inset:-20%;
    z-index:3;
    pointer-events:none;
}

.avatar-rama-om-spark{
    position:absolute;
    clip-path:polygon(50% 0%,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0% 50%,44% 44%);
    animation:ramaPixelDustPuls 2.8s ease-in-out infinite;
}

/* Royal Crest - portare LITERALA a structurii sursa (vezi comentariul din
   Data/core.php, renderRamaOverlayHtml). Niciun z-index custom pe niciun
   strat (sursa n-are) - stivuirea rezulta exclusiv din ordinea DOM:
   glow, svgwrap (coroana+arcuri), particulewrap (diamante), inel de
   fundal, apoi avatarul (adaugat separat, ca frate, de codul comun) -
   ultimul in DOM, deci deasupra celorlalte straturi. */
.avatar-rama-rc-glow{
    position:absolute;
    inset:-18px;
    border-radius:50%;
    opacity:.55;
    filter:blur(40px);
    background:radial-gradient(circle,rgba(254,243,199,.75),rgba(245,158,11,.42) 48%,transparent 74%);
    animation:ramaNeonPuls 3s ease-in-out infinite;
}

.avatar-rama-rc-svgwrap{
    position:absolute;
    inset:-18%;
    animation:ramaFocRotire 16s linear infinite;
}

.avatar-rama-rc-particulewrap{
    position:absolute;
    inset:-12%;
    pointer-events:none;
    animation:ramaClockworkContra 9s linear infinite;
}

.avatar-rama-rc-diamond{
    position:absolute;
    pointer-events:none;
    clip-path:polygon(50% 0%,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0% 50%,44% 44%);
    transform:translate(-50%,-50%);
    animation:ramaPixelDustPuls 2.6s ease-in-out infinite;
}

.avatar-rama-holder .avatar-rama-ring.rama-royalcrest{
    inset:5%;
    overflow:hidden;
    border-radius:50%;
}

.avatar-rama-rc-conic{
    position:absolute;
    inset:-50%;
    background:conic-gradient(#78350f,#fbbf24,#fef3c7,#f59e0b,#92400e,#fef3c7,#fbbf24,#78350f);
    animation:ramaFocRotire 7s linear infinite;
}

/* Avatarul propriu-zis trebuie sa fie mai mic decat holderul (inset:9%
   in sursa, adica 82% din diametru, centrat) - nu 100% ca la toate
   celelalte rame. Nu se poate face literal cu position:absolute+inset:9%
   fara sa atingem renderAvatarCuRama()/renderAvatarRamaPreview() (comune
   tuturor ramelor): testat, avatarul e SINGURUL element in flow normal
   care da dimensiune holderului (.avatar-rama-holder n-are width/height
   proprii) - scos din flow, holderul colapseaza la 0x0 si tot ce e
   pozitionat in % (inclusiv inelul, diamantele) colapseaza odata cu el.
   Solutie echivalenta vizual, fara sa scoata avatarul din flow:
   transform:scale(.82) - 100%-9%-9%=82%, centrat implicit (transform nu
   afecteaza layout-ul/dimensiunea cutiei, doar randarea). */
.avatar-rama-holder:has(> .rama-royalcrest) > .avatar{
    transform:scale(.82);
}

/* Golden Patron - varianta "de lux", inlocuita complet cu imagine PNG
   externa, mirror 1:1 cu Dragon (.avatar-rama-glow/.avatar-rama-img,
   generice, definite mai sus langa cazul dragon) - doar valorile proprii
   (culoare glow + acelasi scale 1.4 ca la imagine) */
.avatar-rama-glow.rama-goldenpatron-glow{
    background:rgba(202,138,4,.2);
    filter:blur(24px);
    transform:scale(1.4);
}

.avatar-rama-img.rama-goldenpatron-img{
    transform:scale(1.4);
}


/* ============================================================
   LAVA / PLASMA / VOID / GALAXY / FIRE - <canvas> + shader WebGL
   (Data/assets/js/rama-{cheie}.js + rama-webgl-shared.js), nu CSS -
   texturi organice reale (noise/fbm), fiecare cu shader-ul ei specific.
   Aici doar pozitionarea canvas-ului si glow-ul (drop-shadow) per rama -
   identica ca pozitionare pentru toate, doar culoarea glow-ului difera.
   ============================================================ */

.avatar-rama-canvas{
    position:absolute;
    top:-20%;
    left:-20%;
    width:140%;
    height:140%;
    display:block;
    pointer-events:none;
    z-index:1;
}

.avatar-rama-canvas.rama-lava-canvas{
    filter:drop-shadow(rgba(249,115,22,.8) 0 0 5px) drop-shadow(rgba(234,88,12,.5) 0 0 16px);
}

.avatar-rama-canvas.rama-plasma-canvas{
    filter:drop-shadow(rgba(200,80,255,.7) 0 0 6px) drop-shadow(rgba(80,200,255,.4) 0 0 16px);
}

.avatar-rama-canvas.rama-void-canvas{
    filter:drop-shadow(rgba(124,58,237,.6) 0 0 6px) drop-shadow(rgba(80,0,150,.4) 0 0 18px);
}

.avatar-rama-canvas.rama-galaxy-canvas{
    filter:drop-shadow(rgba(100,80,200,.5) 0 0 5px) drop-shadow(rgba(60,0,120,.4) 0 0 14px);
}

.avatar-rama-canvas.rama-fire-canvas{
    filter:drop-shadow(#f9731690 0 0 5px) drop-shadow(#ef444450 0 0 14px);
}


/* ============================================================
   MATRIX - <canvas> 2D normal (Data/assets/js/rama-matrix.js), NU webgl -
   spre deosebire de restul, umple exact acelasi cerc cu avatarul si sta
   DEASUPRA lui (z-index peste .avatar), fara niciun drop-shadow -
   avatarul se vede prin transparenta dintre coloanele de caractere
   ============================================================ */

.avatar-rama-matrix-canvas{
    position:absolute;
    inset:0;
    display:block;
    border-radius:50%;
    z-index:3;
    pointer-events:none;
}


/* ============================================================
   ANGEL - repeating-conic-gradient cu unitate regulata (raze fine),
   galben-alb, rotatie lenta - lumina divina, plus un glow pulsatoriu
   difuz in spate (::before), exact structura in 2 straturi PunchPlay
   ============================================================ */

.avatar-rama-ring.rama-angel{
    background:repeating-conic-gradient(transparent 0deg, rgba(255,253,150,.85) 1.5deg, rgb(255,250,100) 2.5deg, transparent 5deg);
    animation:ramaAngelRotire 12s linear infinite;
    filter:drop-shadow(0 0 4px rgba(255,250,180,.85));
}

.avatar-rama-ring.rama-angel::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    background:rgba(253,230,138,.4);
    filter:blur(10px);
    z-index:-1;
    animation:ramaAngelGlowPuls 3s ease-in-out infinite;
}

@keyframes ramaAngelRotire{
    to{ transform:rotate(360deg); }
}

@keyframes ramaAngelGlowPuls{
    0%,100%{ opacity:.7; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.05); }
}


/* ============================================================
   HEARTBEAT - inel plin (nu doar bordura, ca "Love") cu gradient
   rosu-roz + glow difuz separat, ambele pulsand cu ritm de heartbeat -
   ramă distinctă de "Love" (care ramane bordura simpla), mai fidela
   structurii PunchPlay (2 straturi: glow blur + inel plin)
   ============================================================ */

.avatar-rama-ring.rama-heartbeat{
    background:linear-gradient(135deg,#fb7185,#ef4444,#e11d48);
    animation:ramaHeartbeatPuls 1.4s ease-in-out infinite;
}

.avatar-rama-ring.rama-heartbeat::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    background:rgba(244,63,94,.2);
    filter:blur(8px);
    z-index:-1;
    animation:ramaHeartbeatPuls 1.4s ease-in-out infinite;
}

@keyframes ramaHeartbeatPuls{
    0%,100%{ transform:scale(1); }
    14%{ transform:scale(1.3); }
    28%{ transform:scale(1); }
    42%{ transform:scale(1.2); }
    70%{ transform:scale(1); }
}


/* ============================================================
   RAINBOW - inel curcubeu rotitor continuu
   ============================================================ */

/* .avatar-rama-holder adaugat doar ca sa egaleze specificitatea regulii
   generice [data-rama-size] (vezi acelasi fix de la Stars/Lightning) -
   sursa are avatarul inset-[3px] mai mic decat inelul, aici obtinem aceeasi
   margine subtire facand inelul sa iasa doar 3px in afara avatarului */
.avatar-rama-holder .avatar-rama-ring.rama-rainbow{
    inset:-3px;
    background:conic-gradient(#f43f5e,#f97316,#eab308,#22c55e,#06b6d4,#8b5cf6,#f43f5e);
    animation:ramaRainbowRotire 3s linear infinite;
}

@keyframes ramaRainbowRotire{
    to{ transform:rotate(360deg); }
}


/* ============================================================
   SAKURA - portat 1:1 dupa sursa: glow difuz (inset -3px, blur-md) +
   inel de fundal (acelasi gradient roz), apoi 12 petale de cires
   INDIVIDUALE (nu 8 generice), fiecare cu propria pozitie/marime/
   culoare/intarziere, care plutesc si se rotesc usor (ramaSakuraDrift)
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-sakura{
    inset:-2px;
    background:linear-gradient(135deg,#fecdd3,#fbcfe8,#fda4af);
}

.avatar-rama-ring.rama-sakura::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:50%;
    background:linear-gradient(135deg,#fecdd3,#fbcfe8,#fda4af);
    opacity:.3;
    filter:blur(12px);
    z-index:-1;
}

.avatar-rama-sakura-petal{
    position:absolute;
    border-radius:50%;
    animation:ramaSakuraDrift 3s ease-in-out infinite;
}

@keyframes ramaSakuraDrift{
    0%,100%{ opacity:0; transform:rotate(-20deg) scale(.3); }
    25%{ opacity:1; transform:rotate(15deg) scale(1); }
    75%{ opacity:.8; transform:rotate(-5deg) scale(.85); }
}


/* ============================================================
   DRAGON - imagine reala (dragon.png) suprapusa PESTE avatar (nu in
   spate, ca inelele) + glow portocaliu difuz in spatele avatarului -
   markup special-cazat in renderRamaOverlayHtml(), fara .avatar-rama-ring
   ============================================================ */

.avatar-rama-glow{
    position:absolute;
    inset:0;
    border-radius:50%;
    z-index:0;
    pointer-events:none;
}

.avatar-rama-glow.rama-dragon-glow{
    background:rgba(234,88,12,.2);
    filter:blur(16px);
    transform:scale(1.4);
}

.avatar-rama-img{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    width:100%;
    height:100%;
    -o-object-fit:contain;
       object-fit:contain;
}

.avatar-rama-img.rama-dragon-img{
    transform:scale(1.4);
}


/* ============================================================
   AURORA - 2 straturi: inel multicolor + glow difuz mai mare in
   spate, ambele isi schimba nuanta continuu (hue-rotate)
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-aurora{
    inset:-2px;
    background:conic-gradient(from 0deg,#4ade80,#67e8f9,#a78bfa,#4ade80);
    animation:ramaAuroraHue 5s linear infinite;
}

.avatar-rama-ring.rama-aurora::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    background:conic-gradient(from 0deg,#4ade80,#67e8f9,#a78bfa,#4ade80);
    filter:blur(10px);
    opacity:.3;
    z-index:-1;
    animation:ramaAuroraHue 5s linear infinite;
}

@keyframes ramaAuroraHue{
    0%{ filter:hue-rotate(0deg); }
    100%{ filter:hue-rotate(360deg); }
}


/* ============================================================
   BUBBLE - portat 1:1 dupa sursa: glow difuz (conic-gradient pastelat,
   isi schimba nuanta continuu - ramaAuroraHue) + inel de fundal cu
   aceeasi paleta + 12 "bule" INDIVIDUALE (nu generice), fiecare cu
   propria pozitie/marime/culoare/intarziere, care pulseaza in opacitate
   (ramaPixelDustPuls, reutilizata)
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-bubble{
    inset:-2px;
    background:conic-gradient(#c084fc,#38bdf8,#f0abfc,#a5f3fc,#e879f9,#c084fc);
    animation:ramaAuroraHue 6s linear infinite;
}

.avatar-rama-ring.rama-bubble::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    background:conic-gradient(#c084fc,#38bdf8,#f0abfc,#a5f3fc,#e879f9,#c084fc);
    opacity:.25;
    filter:blur(24px);
    z-index:-1;
    animation:ramaAuroraHue 6s linear infinite;
}

.avatar-rama-bubble{
    position:absolute;
    border-radius:50%;
    border:1.5px solid;
    animation:ramaPixelDustPuls 3.5s ease-in-out infinite;
}

@keyframes ramaBubbleOrbit{
    from{ transform:rotate(0deg) translateY(calc(var(--rama-r) * -1)); }
    to{ transform:rotate(360deg) translateY(calc(var(--rama-r) * -1)); }
}


/* ============================================================
   CLOCKWORK - structura completa in 6 straturi, portata 1:1 dupa sursa
   reala (JSX/Tailwind): glow + angrenaj SVG rotitor + inel secundar SVG
   contra-rotitor + fundal auriu rotitor (toate in spatele avatarului) +
   2 ace de ceas independente (minutar 8s, orar 48s) + punctul central
   (deasupra avatarului - fara asta acele nu s-ar vedea deloc). Markup
   generat direct in PHP (renderRamaOverlayHtml, caz special 'clockwork'),
   nu foloseste .avatar-rama-ring/.avatar-rama-particule generice.
   Reutilizeaza ramaFocRotire (echivalent spin-rainbow) si ramaClockworkContra
   (echivalent spin-ccw, deja definita mai sus - refolosita, nu duplicata)
   si ramaNeonPuls (echivalent neon-pulse) - fara sa introduc keyframes noi.
   ============================================================ */

.avatar-rama-cw-glow{
    position:absolute;
    inset:-35%;
    border-radius:50%;
    opacity:.5;
    filter:blur(24px);
    background:radial-gradient(circle,rgba(254,243,199,.55),rgba(245,158,11,.3) 50%,transparent 72%);
    animation:ramaNeonPuls 3.5s ease-in-out infinite;
    z-index:0;
    pointer-events:none;
}

.avatar-rama-cw-gear{
    position:absolute;
    inset:-15%;
    animation:ramaFocRotire 30s linear infinite;
    z-index:1;
    pointer-events:none;
}

.avatar-rama-cw-inner{
    position:absolute;
    inset:-4%;
    animation:ramaClockworkContra 18s linear infinite;
    z-index:1;
    pointer-events:none;
}

.avatar-rama-cw-svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}

.avatar-rama-cw-backdrop{
    position:absolute;
    inset:5%;
    overflow:hidden;
    border-radius:50%;
    z-index:1;
    pointer-events:none;
}

.avatar-rama-cw-backdrop-spin{
    position:absolute;
    inset:-50%;
    background:conic-gradient(#451a03,#78350f,#92400e,#b45309,#78350f,#451a03);
    animation:ramaFocRotire 20s linear infinite;
}

.avatar-rama-cw-hand-wrap{
    position:absolute;
    inset:5%;
    z-index:4;
    pointer-events:none;
}

.avatar-rama-cw-hand-wrap--min{
    animation:ramaFocRotire 8s linear infinite;
}

.avatar-rama-cw-hand-wrap--hour{
    animation:ramaFocRotire 48s linear infinite;
}

.avatar-rama-cw-hand--min-long{
    position:absolute;
    left:50%;
    top:50%;
    width:2px;
    height:44%;
    transform:translate(-50%,-100%);
    border-radius:1px;
    background:rgba(254,243,199,.9);
}

.avatar-rama-cw-hand--min-short{
    position:absolute;
    left:50%;
    top:50%;
    width:2px;
    height:14%;
    transform:translateX(-50%);
    border-radius:1px;
    background:rgba(254,243,199,.6);
}

.avatar-rama-cw-hand--hour{
    position:absolute;
    left:50%;
    top:50%;
    width:3px;
    height:30%;
    transform:translate(-50%,-100%);
    border-radius:1.5px;
    background:#facc15;
}

.avatar-rama-cw-center{
    position:absolute;
    left:50%;
    top:50%;
    width:12%;
    height:12%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:#fcd34d;
    box-shadow:0 0 6px 3px rgba(251,191,36,.6);
    z-index:5;
    pointer-events:none;
}

/* echivalentul "spin-ccw" - refolosita si de Lightning/Orbit/Vortex, pastrata
   aici (era deja definita in vechiul bloc Clockwork inainte de rescriere) */
@keyframes ramaClockworkContra{
    to{ transform:rotate(-360deg); }
}


/* ============================================================
   DNA - portata 1:1 dupa sursa reala: NU e sistemul generic de particule
   (pozitii fixe rotate+translateY per punct) - sunt 2 GRUPURI separate de
   cate 6 puncte, fiecare punct pozitionat STATIC (left/top %, hexagon la
   60 grade unul de altul), iar grupul INTREG se roteste ca bloc - un
   hexagon cyan + un hexagon roz decalat cu 30 grade fata de primul, care
   impreuna dau cele 12 pozitii ale unui ceas, rotind in sensuri opuse.
   Markup generat direct in PHP (renderRamaOverlayHtml, caz special 'dna').
   ============================================================ */

.avatar-rama-dna-group{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
}

.avatar-rama-dna-group--cyan{
    animation:ramaFocRotire 3s linear infinite;
}

.avatar-rama-dna-group--pink{
    animation:ramaClockworkContra 4s linear infinite;
}

.avatar-rama-dna-dot{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.avatar-rama-dna-dot--cyan{
    background:#22d3ee;
    box-shadow:0 0 4px 2px rgba(34,211,238,.5);
}

.avatar-rama-dna-dot--pink{
    background:#f472b6;
    box-shadow:0 0 4px 2px rgba(244,114,182,.5);
}


/* ============================================================
   EMBER - portata 1:1 dupa sursa reala, 4 straturi: glow difuz pulsatoriu
   (::before, "lava-glow") + fundal inel (gradient inchis portocaliu-rosu)
   + avatarul (neschimbat) + 8 scantei INDIVIDUALE, fiecare cu propria
   pozitie (stanga %), culoare, marime si intarziere - nu sunt distribuite
   uniform/generic, sunt exact cele 8 din sursa (markup generat direct in
   PHP, renderRamaOverlayHtml, caz special 'ember', nu sistemul generic de
   particule - aici fiecare scanteie chiar difera de urmatoarea).
   ============================================================ */

/* .avatar-rama-holder adaugat doar ca sa egaleze specificitatea regulii
   generice [data-rama-size] (vezi acelasi fix de la Stars/Lightning) -
   avatarul din sursa e inset-[2px] mai mic decat fundalul inelului, aici
   obtinem aceeasi margine subtire facand inelul sa iasa doar 2px in afara
   avatarului */
.avatar-rama-holder .avatar-rama-ring.rama-ember{
    inset:-2px;
    background:linear-gradient(135deg,#431407,#7f1d1d,#431407);
}

.avatar-rama-ring.rama-ember::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:50%;
    background:rgba(124,45,18,.5);
    filter:blur(10px);
    z-index:-1;
    animation:ramaEmberGlowPuls 3s ease-in-out infinite;
}

@keyframes ramaEmberGlowPuls{
    0%,100%{ opacity:.15; }
    50%{ opacity:1; }
}

/* scanteile stau in interiorul unui .avatar-rama-particule (nu al sistemul
   generic <i><b>) doar ca sa mosteneasca --rama-r, deja definita acolo per
   marime avatar - fara sa reinventez o alta variabila de raza */
.avatar-rama-ember-spark{
    position:absolute;
    bottom:5%;
    border-radius:50%;
    animation:ramaEmberUrca 2.2s ease-in infinite;
}

@keyframes ramaEmberUrca{
    0%{ transform:translateY(0) scale(1); opacity:0; }
    15%{ opacity:1; }
    85%{ transform:translateY(calc(var(--rama-r) * -2.2)) scale(.4); opacity:.6; }
    100%{ transform:translateY(calc(var(--rama-r) * -2.5)) scale(0); opacity:0; }
}


/* ============================================================
   FILM STRIP - portat 1:1 dupa sursa reala, 4 straturi: glow difuz +
   fundal cu gradient inchis + avatar + inel SVG rotitor (22s) cu 8
   perforatii detaliate de pelicula (corp + interior + 4 nituri fiecare).
   Markup SVG generat direct in PHP (renderRamaOverlayHtml, caz special
   'filmstrip') - reutilizeaza .avatar-rama-cw-svg (generic, de la Clockwork)
   pentru dimensionarea svg-ului, ca sa nu duplic acea regula.
   ============================================================ */

.avatar-rama-ring.rama-filmstrip{
    background:linear-gradient(135deg,#1e293b,#27272a,#0f172a);
}

.avatar-rama-ring.rama-filmstrip::before{
    content:"";
    position:absolute;
    inset:-6%;
    border-radius:50%;
    background:rgba(100,116,139,.15);
    filter:blur(12px);
    z-index:-1;
}

.avatar-rama-fs-gear{
    position:absolute;
    inset:-10%;
    animation:ramaFocRotire 22s linear infinite;
    z-index:1;
    pointer-events:none;
}


/* ============================================================
   FROST - portat 1:1 dupa sursa reala: glow difuz (sky-100/blue-200/
   cyan-300) + inel conic-gradient rotitor (14s) + 12 cristale de gheata
   INDIVIDUALE (nu 8 generice) - fiecare cu propria pozitie, marime,
   culoare (6 nuante de albastru-deschis) si intarziere. Markup generat
   direct in PHP (caz special 'frost'), reutilizeaza ramaPixelDustPuls
   (deja definita la Pixel Dust) - "pixel-dust" din sursa.
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-frost{
    inset:-2px;
    background:conic-gradient(#e0f2fe,#bfdbfe,#f0f9ff,#dbeafe,#cffafe,#e0f2fe);
    animation:ramaFocRotire 14s linear infinite;
}

.avatar-rama-ring.rama-frost::before{
    content:"";
    position:absolute;
    inset:-8%;
    border-radius:50%;
    opacity:.25;
    filter:blur(16px);
    background:linear-gradient(135deg,#e0f2fe,#bfdbfe,#67e8f9);
    z-index:-1;
}

.avatar-rama-frost-crystal{
    position:absolute;
    clip-path:polygon(50% 0%,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0% 50%,38% 38%);
    animation:ramaPixelDustPuls 3s ease-in-out infinite;
}


/* ============================================================
   GLITCH - aberatie cromatica: 2 inele (rosu/cyan) care "sar" scurt
   in directii opuse, folosind exact glitch-r/glitch-b primite
   ============================================================ */

.avatar-rama-ring.rama-glitch{
    border:2px solid rgba(239,68,68,.8);
    animation:ramaGlitchR .9s step-end infinite;
}

.avatar-rama-ring.rama-glitch::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px solid rgba(34,211,238,.8);
    animation:ramaGlitchB .9s step-end infinite;
}

.avatar-rama-ring.rama-glitch::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.2);
}

@keyframes ramaGlitchR{
    0%,100%{ transform:translate(0,0); opacity:.85; }
    20%{ transform:translate(-2px,1px); opacity:.6; }
    40%{ transform:translate(0,0); opacity:1; }
    60%{ transform:translate(2px,-1px); opacity:.5; }
    80%{ transform:translate(-1px,0); opacity:.8; }
}

@keyframes ramaGlitchB{
    0%,100%{ transform:translate(0,0); opacity:.85; }
    20%{ transform:translate(2px,-1px); opacity:.6; }
    40%{ transform:translate(0,0); opacity:1; }
    60%{ transform:translate(-2px,1px); opacity:.5; }
    80%{ transform:translate(1px,0); opacity:.8; }
}


/* ============================================================
   LENS FLARE - portat 1:1 dupa sursa reala: glow difuz + fundal inchis
   (in spatele avatarului, ca restul inelelor) + un grup de 6 elemente
   (raza anamorfica + punct central + 4 "ghost flares") care se rotesc
   IMPREUNA ca un singur bloc, DEASUPRA avatarului, clippat exact la
   cercul lui (nu bleeds in afara, ca la Prism/Spotlight)
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-lensflare{
    inset:-2px;
    background:linear-gradient(135deg,#0f172a,#1e293b,#0f172a);
}

.avatar-rama-ring.rama-lensflare::before{
    content:"";
    position:absolute;
    inset:-4%;
    border-radius:50%;
    background:rgba(96,165,250,.1);
    filter:blur(8px);
    z-index:-1;
}

.avatar-rama-lf-clip{
    position:absolute;
    inset:0;
    overflow:hidden;
    border-radius:50%;
    z-index:3;
    pointer-events:none;
}

.avatar-rama-lf-spin{
    position:absolute;
    inset:0;
    animation:ramaFocRotire 6s linear infinite;
}

.avatar-rama-lf-streak{
    position:absolute;
    top:50%;
    left:-30%;
    right:-30%;
    height:2px;
    margin-top:-1px;
    background:linear-gradient(to right,transparent,rgba(96,165,250,.6),rgba(255,255,255,.95),rgba(96,165,250,.6),transparent);
    filter:blur(.5px);
}

.avatar-rama-lf-center{
    position:absolute;
    top:50%;
    left:50%;
    width:5px;
    height:5px;
    margin:-2.5px 0 0 -2.5px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 6px 3px #93c5fd, 0 0 16px 6px rgba(59,130,246,.25);
}

.avatar-rama-lf-ghost{
    position:absolute;
    border-radius:50%;
}

.avatar-rama-lf-ghost--1{ top:22%; left:64%; width:9px; height:9px; border:1px solid rgba(147,197,253,.55); box-shadow:0 0 3px 1px rgba(147,197,253,.25); }
.avatar-rama-lf-ghost--2{ top:62%; left:26%; width:13px; height:13px; border:1px solid rgba(167,139,250,.45); }
.avatar-rama-lf-ghost--3{ top:35%; left:74%; width:4px; height:4px; background:rgba(255,255,200,.7); }
.avatar-rama-lf-ghost--4{ top:70%; left:18%; width:6px; height:6px; border:1px solid rgba(96,165,250,.4); }


/* ============================================================
   LIGHTNING - inel intrerupt (dashed) galben care se roteste rapid
   si palpaie (spin + lightning-flicker primite), plus un al doilea
   inel dashed, mai mic, contra-rotitor - insete fixe (nu procentuale),
   ca in sursa; bug reparat: al 2-lea inel trebuia sa fie MAI MARE
   (inset negativ), nu mai mic (avea inset:5px, gresit ca semn)
   ============================================================ */

/* .avatar-rama-holder adaugat in selector doar ca sa egaleze specificitatea
   regulii generice [data-rama-size] (altfel inset-ul de mai jos e ignorat -
   3 selectoare simple vs 2, regula generica ar castiga oricum) */
.avatar-rama-holder .avatar-rama-ring.rama-lightning{
    inset:-2px;
    border:2px dashed #fde047;
    box-shadow:0 0 6px 2px rgba(253,224,71,.5);
    animation:ramaFocRotire .35s linear infinite, ramaLightningFlicker 2s step-end infinite;
}

.avatar-rama-ring.rama-lightning::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:1px dashed #fbbf24;
    opacity:.5;
    animation:ramaClockworkContra .5s linear infinite, ramaLightningFlicker 2s step-end infinite .3s;
}

@keyframes ramaLightningFlicker{
    0%,89%,100%{ opacity:1; }
    90%{ opacity:.3; }
    92%{ opacity:.9; }
    94%{ opacity:.1; }
    96%{ opacity:.85; }
}


/* ============================================================
   MERCURY - crom lichid: conic-gradient in tonuri de gri/argintiu (14
   opriri, exact sursa), rotire rapida
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-mercury{
    inset:-3px;
    background:conic-gradient(#6b7280,#d1d5db,#f9fafb,#fff,#f3f4f6,#e5e7eb,#9ca3af,#6b7280,#d1d5db,#f9fafb,#fff,#e5e7eb,#9ca3af,#6b7280);
    animation:ramaFocRotire 3s linear infinite;
}


/* ============================================================
   NEON - tub neon cyan pulsatoriu
   ============================================================ */

.avatar-rama-ring.rama-neon{
    border:2px solid #22d3ee;
    box-shadow:0 0 6px #22d3ee, 0 0 18px 6px rgba(34,211,238,.5), 0 0 35px 10px rgba(34,211,238,.19);
    animation:ramaNeonPuls 1.5s ease-in-out infinite;
}

.avatar-rama-ring.rama-neon::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    opacity:.2;
    box-shadow:0 0 20px 8px #22d3ee;
    animation:ramaNeonPuls 1.5s ease-in-out infinite;
}

@keyframes ramaNeonPuls{
    0%,100%{ opacity:.7; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.04); }
}


/* ============================================================
   OIL SLICK - model irizat, rotire + schimbare continua de nuanta
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-oilslick{
    inset:-3px;
    background:conic-gradient(#c084fc,#818cf8,#67e8f9,#4ade80,#fde68a,#fb923c,#f472b6,#c084fc);
    animation:ramaFocRotire 8s linear infinite, ramaAuroraHue 3s linear infinite;
}


/* ============================================================
   ORBIT - portat 1:1 dupa sursa reala: 3 inele "giroscop" reale, fiecare
   inclinat in 3D (perspective+rotateX static, ca un inel vazut din lateral)
   SI rotindu-se pe axa proprie (inner spin) - 2 elemente per inel (tilt
   static + spin animat), nu se poate face doar cu ::before/::after
   (transform static + animat nu pot coexista pe acelasi element fara sa
   se suprascrie). Markup generat direct in PHP (caz special 'orbit').
   ============================================================ */

/* z-index:4 (nu 1) - inelele trebuie sa treaca PESTE avatar (z-index:2),
   nu doar in spatele lui, ca sa dea efectul real de "giroscop" (portiunea
   din fata a elipsei inclinate traverseaza vizual fata avatarului). In
   sursa asta rezulta implicit din ordinea DOM (avatarul e primul, inelele
   dupa) - la noi ordinea DOM nu conteaza fiindca avatarul are deja
   z-index:2 explicit, deci inelele trebuie sa-l depaseasca explicit */
.avatar-rama-orbit-tilt{
    position:absolute;
    inset:-5px;
    pointer-events:none;
    z-index:4;
}

.avatar-rama-orbit-tilt--1{ transform:perspective(200px) rotateX(72deg); }
.avatar-rama-orbit-tilt--2{ transform:perspective(200px) rotateX(72deg) rotateZ(60deg); }
.avatar-rama-orbit-tilt--3{ transform:perspective(200px) rotateX(72deg) rotateZ(120deg); }

.avatar-rama-orbit-spin{
    position:absolute;
    inset:0;
    border-radius:50%;
    animation:ramaFocRotire 2s linear infinite;
}

.avatar-rama-orbit-spin--1{ border:1.5px solid rgba(34,211,238,.8); animation-duration:2s; }
.avatar-rama-orbit-spin--2{ border:1.5px solid rgba(167,139,250,.7); animation-duration:3s; animation-direction:reverse; }
.avatar-rama-orbit-spin--3{ border:1.5px solid rgba(244,114,182,.6); animation-duration:2.5s; }


/* ============================================================
   PIXEL DUST - 12 particule pixelate (romb-uri), orbitand continuu,
   culori alternate cyan/violet/roz
   ============================================================ */

.avatar-rama-particule.rama-pixeldust-particule i b{
    width:4px;height:4px;
    margin:-2px 0 0 -2px;
    clip-path:polygon(50% 0%,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0% 50%,38% 38%);
    animation:ramaPixelDustPuls 2s ease-in-out infinite;
}

.avatar-rama-particule.rama-pixeldust-particule i:nth-child(3n+1) b{ background:#22d3ee; box-shadow:0 0 4px #22d3ee; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(3n+2) b{ background:#a78bfa; box-shadow:0 0 4px #a78bfa; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(3n) b{ background:#f472b6; box-shadow:0 0 4px #f472b6; }

@keyframes ramaPixelDustPuls{
    0%,100%{ opacity:0; transform:scale(0); }
    50%{ opacity:1; transform:scale(1); }
}

.avatar-rama-particule.rama-pixeldust-particule i{ animation:ramaBubbleOrbit 7s linear infinite; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(1){ animation-delay:0s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(2){ animation-delay:-.6s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(3){ animation-delay:-1.2s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(4){ animation-delay:-1.8s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(5){ animation-delay:-2.4s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(6){ animation-delay:-3s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(7){ animation-delay:-3.6s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(8){ animation-delay:-4.2s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(9){ animation-delay:-4.8s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(10){ animation-delay:-5.4s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(11){ animation-delay:-6s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(12){ animation-delay:-6.6s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(1) b{ animation-delay:0s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(2) b{ animation-delay:.18s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(3) b{ animation-delay:.36s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(4) b{ animation-delay:.54s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(5) b{ animation-delay:.72s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(6) b{ animation-delay:.9s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(7) b{ animation-delay:1.08s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(8) b{ animation-delay:1.26s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(9) b{ animation-delay:1.44s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(10) b{ animation-delay:1.62s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(11) b{ animation-delay:1.8s; }
.avatar-rama-particule.rama-pixeldust-particule i:nth-child(12) b{ animation-delay:1.98s; }


/* ============================================================
   PRISM - portat 1:1 dupa sursa: glow pulsatoriu + inel alb + o banda de
   spectru curcubeu care se roteste DEASUPRA avatarului (mix-blend-mode:
   screen), clippata exact la cercul lui (.avatar-rama-lf-clip, comuna cu
   Lens Flare/Spotlight)
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-prism{
    inset:-2px;
    background:linear-gradient(135deg,#fff,#f1f5f9,#fff);
}

.avatar-rama-ring.rama-prism::before{
    content:"";
    position:absolute;
    inset:-4%;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    filter:blur(16px);
    z-index:-1;
    animation:ramaNeonPuls 4s ease-in-out infinite;
}

.avatar-rama-prism-spin{
    position:absolute;
    inset:-50%;
    animation:ramaFocRotire 4s linear infinite;
    background:conic-gradient(transparent 0%,transparent 78%,#f472b6 81%,#fb923c 83%,#facc15 85%,#4ade80 87%,#38bdf8 89%,#a78bfa 91%,transparent 93%);
    mix-blend-mode:screen;
}


/* ============================================================
   RAIN - portat 1:1 dupa sursa: 9 dare de ploaie (nu 8), fiecare cu
   propria pozitie/inaltime/intarziere - markup generat in PHP (caz
   special 'rain'), nu mai e nevoie de translateX pe <i> (pozitia e
   direct in "left" per dara)
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-rain{
    inset:-2px;
    background:linear-gradient(135deg,#334155,#172554,#1e293b);
}

.avatar-rama-rain-drop{
    position:absolute;
    top:0;
    width:1px;
    background:linear-gradient(transparent,rgba(147,210,255,.7),transparent);
    animation:ramaRainCade 1.8s linear infinite;
}

@keyframes ramaRainCade{
    0%{ transform:translateY(-50px); }
    100%{ transform:translateY(calc(var(--rama-r) * 3)); }
}


/* ============================================================
   RIPPLE - inel plin degrade + 2 valuri concentrice care pulseaza
   spre exterior, decalate (aproximare a celor 3 din sursa)
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-ripple{
    inset:-2px;
    background:linear-gradient(135deg,#a78bfa,#67e8f9,#f472b6);
}

.avatar-rama-ring.rama-ripple::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1px solid rgba(167,139,250,.5);
    animation:ramaRippleUnda 1.8s ease-out infinite;
}

.avatar-rama-ring.rama-ripple::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1px solid rgba(167,139,250,.5);
    animation:ramaRippleUnda 1.8s ease-out infinite .9s;
}

@keyframes ramaRippleUnda{
    0%{ transform:scale(1); opacity:.7; }
    100%{ transform:scale(1.8); opacity:0; }
}


/* ============================================================
   SCANLINE - portat 1:1 dupa sursa: inel de fundal verde-inchis
   (inset -2px, in spatele avatarului), apoi DEASUPRA avatarului,
   clippat exact la cercul lui (.avatar-rama-lf-clip, comuna cu Lens
   Flare/Prism/Spotlight): o textura statica de linii CRT +
   o raza luminoasa care matura vertical continuu
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-scanline{
    inset:-2px;
    background:linear-gradient(135deg,#022c22,#14532d,#022c22);
}

.avatar-rama-scanline-texture{
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(0,255,100,.07) 3px,rgba(0,255,100,.07) 4px);
}

.avatar-rama-scanline-beam{
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:100%;
    background:linear-gradient(transparent 0%,transparent 44%,rgba(0,255,150,.35) 48%,rgba(120,255,200,.65) 50%,rgba(0,255,150,.35) 52%,transparent 56%,transparent 100%);
    animation:ramaScanlineBeam 2.4s linear infinite;
}

@keyframes ramaScanlineBeam{
    0%{ transform:translateY(-100%); }
    100%{ transform:translateY(100%); }
}


/* ============================================================
   SPOTLIGHT - portat 1:1 dupa sursa: acelasi tipar ca Prism - glow +
   inel cald + con de lumina rotitor DEASUPRA avatarului, clippat exact
   la cercul lui (.avatar-rama-lf-clip, comuna cu Lens Flare/Prism)
   ============================================================ */

.avatar-rama-holder .avatar-rama-ring.rama-spotlight{
    inset:-2px;
    background:linear-gradient(135deg,#fef3c7,#fff,#fef9c3);
}

.avatar-rama-ring.rama-spotlight::before{
    content:"";
    position:absolute;
    inset:-6%;
    border-radius:50%;
    background:rgba(253,230,138,.3);
    filter:blur(12px);
    z-index:-1;
    animation:ramaNeonPuls 3s ease-in-out infinite;
}

.avatar-rama-spotlight-spin{
    position:absolute;
    inset:-50%;
    animation:ramaFocRotire 5s linear infinite;
    background:conic-gradient(transparent 0%,transparent 70%,rgba(255,255,220,.35) 79%,rgba(255,255,255,.8) 87%,rgba(255,255,220,.35) 95%,transparent 100%);
}


/* ============================================================
   STARS - portat 1:1 dupa sursa: inel auriu plin + glow static (acelasi
   gradient, blur, opacitate .5, FARA puls - sursa nu are animatie aici)
   + 6 stele INDIVIDUALE (nu 8), fiecare cu propria culoare/pozitie
   ============================================================ */

/* .avatar-rama-holder adaugat in selector doar ca sa egaleze specificitatea
   regulii generice [data-rama-size] (altfel inset-ul de mai jos e ignorat -
   vezi acelasi fix aplicat la Lightning). Sursa are avatarul inset-[2px] mai
   mic decat gradientul de dedesubt (margine subtire) - la noi avatarul nu
   poate fi micsorat per-rama (e global, aceeasi dimensiune pt toate ramele),
   deci obtinem aceeasi margine subtire de 2px facand inelul sa iasa doar
   2px in afara avatarului (echivalent vizual, nu structural) */
.avatar-rama-holder .avatar-rama-ring.rama-stars{
    inset:-2px;
    background:linear-gradient(135deg,#fde047,#fbbf24,#fb923c);
}

.avatar-rama-ring.rama-stars::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:linear-gradient(135deg,#fde047,#fbbf24,#fb923c);
    opacity:.5;
    filter:blur(16px);
    z-index:-1;
}

.avatar-rama-star{
    position:absolute;
    width:7px;height:7px;
    margin:-3.5px 0 0 -3.5px;
    clip-path:polygon(50% 0%,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0% 50%,44% 44%);
    animation:ramaPixelDustPuls 2s ease-in-out infinite;
}


/* ============================================================
   VORTEX - portat 1:1 dupa sursa: 4 inele reale (nu 3), fiecare cu un
   punct luminos propriu care se roteste odata cu el (efect de "cometa"),
   plus un strat difuz tricolor de fundal
   ============================================================ */

.avatar-rama-vortex-ring{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:1;
}

.avatar-rama-vortex-ring--1{ inset:-14%; border:1px solid rgba(34,211,238,.2); animation:ramaFocRotire 5s linear infinite; }
.avatar-rama-vortex-ring--2{ inset:-10%; border:1px solid rgba(167,139,250,.35); animation:ramaFocRotire 3.5s linear infinite reverse; }
.avatar-rama-vortex-ring--3{ inset:-6%; border:1.5px solid rgba(244,114,182,.55); animation:ramaFocRotire 2s linear infinite; }
.avatar-rama-vortex-ring--4{ inset:-2%; border:2px solid rgba(103,232,249,.75); animation:ramaFocRotire 1.2s linear infinite reverse; }

.avatar-rama-vortex-dot{
    position:absolute;
    left:50%;
    top:0;
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.avatar-rama-vortex-dot--1{ width:6px; height:6px; background:rgba(34,211,238,.6); }
.avatar-rama-vortex-dot--2{ width:6px; height:6px; background:rgba(167,139,250,.7); }
.avatar-rama-vortex-dot--3{ width:8px; height:8px; background:rgba(244,114,182,.8); }
.avatar-rama-vortex-dot--4{ width:8px; height:8px; background:#67e8f9; box-shadow:0 0 4px 2px rgba(103,232,249,.5); }

.avatar-rama-vortex-blur{
    position:absolute;
    inset:-3%;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(6,182,212,.1),rgba(139,92,246,.1),rgba(244,114,182,.1));
    filter:blur(4px);
    z-index:0;
    pointer-events:none;
}


/* ============================================================
   WARP - portat 1:1 dupa sursa: 12 dare (nu 8), la fiecare 30 grade, cu
   4 lungimi diferite care se repeta (30/37/44/51% in sursa, aici convertite
   proportional la multiplii lui --rama-r) - <i> seteaza doar unghiul static,
   <b> creste din centru via scaleX (animatie neschimbata)
   ============================================================ */

.avatar-rama-particule.rama-warp-particule i{
    transform-origin:0 0;
}

.avatar-rama-particule.rama-warp-particule i b{
    height:1px;
    margin:0;
    transform-origin:0% 50%;
    background:linear-gradient(to right,rgba(255,255,255,.9),rgba(180,220,255,.4),transparent);
    animation:ramaWarpRush .85s ease-in infinite;
}

@keyframes ramaWarpRush{
    0%{ transform:scaleX(0); opacity:0; }
    25%{ opacity:1; }
    100%{ transform:scaleX(1); opacity:0; }
}

.avatar-rama-particule.rama-warp-particule i:nth-child(4n+1) b{ width:calc(var(--rama-r) * 1.2); }
.avatar-rama-particule.rama-warp-particule i:nth-child(4n+2) b{ width:calc(var(--rama-r) * 1.45); }
.avatar-rama-particule.rama-warp-particule i:nth-child(4n+3) b{ width:calc(var(--rama-r) * 1.7); }
.avatar-rama-particule.rama-warp-particule i:nth-child(4n) b{ width:calc(var(--rama-r) * 2.0); }

.avatar-rama-particule.rama-warp-particule i:nth-child(1){ transform:rotate(0deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(2){ transform:rotate(30deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(3){ transform:rotate(60deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(4){ transform:rotate(90deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(5){ transform:rotate(120deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(6){ transform:rotate(150deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(7){ transform:rotate(180deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(8){ transform:rotate(210deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(9){ transform:rotate(240deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(10){ transform:rotate(270deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(11){ transform:rotate(300deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(12){ transform:rotate(330deg); }
.avatar-rama-particule.rama-warp-particule i:nth-child(1) b{ animation-delay:0s; }
.avatar-rama-particule.rama-warp-particule i:nth-child(2) b{ animation-delay:.07s; }
.avatar-rama-particule.rama-warp-particule i:nth-child(3) b{ animation-delay:.14s; }
.avatar-rama-particule.rama-warp-particule i:nth-child(4) b{ animation-delay:.21s; }
.avatar-rama-particule.rama-warp-particule i:nth-child(5) b{ animation-delay:.28s; }
.avatar-rama-particule.rama-warp-particule i:nth-child(6) b{ animation-delay:.35s; }
.avatar-rama-particule.rama-warp-particule i:nth-child(7) b{ animation-delay:.42s; }
.avatar-rama-particule.rama-warp-particule i:nth-child(8) b{ animation-delay:.49s; }
.avatar-rama-particule.rama-warp-particule i:nth-child(9) b{ animation-delay:.56s; }
.avatar-rama-particule.rama-warp-particule i:nth-child(10) b{ animation-delay:.63s; }
.avatar-rama-particule.rama-warp-particule i:nth-child(11) b{ animation-delay:.7s; }
.avatar-rama-particule.rama-warp-particule i:nth-child(12) b{ animation-delay:.77s; }


/* ============================================================
   RAME DONATORI (Bronze/Silver/Gold) - inele simple, cate o
   culoare de metal + puls usor, mirror stilul .rama-neon
   ============================================================ */

.avatar-rama-ring.rama-donatorbronze{
    border:2px solid #cd7f32;
    box-shadow:0 0 6px #cd7f32, 0 0 16px 5px rgba(205,127,50,.45);
    animation:ramaDonatorPuls 2.2s ease-in-out infinite;
}

.avatar-rama-ring.rama-donatorsilver{
    border:2px solid #c0c0c0;
    box-shadow:0 0 6px #c0c0c0, 0 0 16px 5px rgba(192,192,192,.5);
    animation:ramaDonatorPuls 2.2s ease-in-out infinite;
}

.avatar-rama-ring.rama-donatorgold{
    border:2px solid #ffd700;
    box-shadow:0 0 7px #ffd700, 0 0 18px 6px rgba(255,215,0,.55);
    animation:ramaDonatorPuls 2.2s ease-in-out infinite;
}

@keyframes ramaDonatorPuls{
    0%,100%{ opacity:.75; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.03); }
}

/* ---------------- pagina "Colectia mea de rame" ---------------- */
.rama-card-locked{
    filter:grayscale(1);
    opacity:.55;
}