/* Molduras e emblemas 3D — carregar depois de club.css, community.css e cosmetics-shop.css */
@property --cos-spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes cos-spin{to{--cos-spin:360deg}}
@keyframes cos-float{0%,100%{translate:0 0}50%{translate:0 -3px}}

/* ---------- paletas metálicas ---------- */
html .frame-amber{--m1:#fff6cf;--m2:#f7d37c;--m3:#c98e2c;--m4:#6a4110;--glow:#e8a93b66;--knurl:repeating-conic-gradient(#0000 0 4.5deg,#3a210a38 4.5deg 5.5deg)}
html .frame-forest{--m1:#e3ffec;--m2:#86e3a9;--m3:#2f9a63;--m4:#0d4130;--glow:#3fd18a55;--knurl:repeating-conic-gradient(from 6deg,#0000 0 16deg,#04281c45 16deg 22deg)}
html .frame-aurora{--m1:#fff3c4;--m2:#f1c568;--m3:#3fae7c;--m4:#14503c;--glow:#e6bd7877;--knurl:repeating-conic-gradient(#0000 0 7deg,#0b2c2238 7deg 8deg)}
html .cosmetic-avatar:not([class*="frame-"]),html .player-frame:not([class*="frame-"]){--m1:#fff6cf;--m2:#f7d37c;--m3:#c98e2c;--m4:#6a4110;--glow:#e8a93b44;--knurl:repeating-conic-gradient(#0000 0 4.5deg,#3a210a38 4.5deg 5.5deg)}

/* ---------- aro metálico em relevo (perfil, comunidade e loja) ---------- */
html .cosmetic-avatar:not(.frame-tropical),
html .player-frame,
html .cosmetic-frame-preview{
  --rw:7px;position:relative;isolation:isolate;border:0!important;
  background:var(--knurl),conic-gradient(from 215deg,var(--m2),var(--m1) 7%,var(--m3) 17%,var(--m4) 31%,var(--m3) 45%,var(--m1) 57%,var(--m2) 68%,var(--m4) 84%,var(--m2))!important;
  box-shadow:0 12px 20px #000b,0 3px 5px #0009,0 0 0 1px #ffffff26,0 0 26px var(--glow),
    inset 0 2px 1px #fffb,inset 0 -3px 4px #000b,inset 2px 0 2px #fff5,inset -2px 0 3px #0008!important;
  transition:transform .18s ease,filter .2s ease;
}
html .cosmetic-avatar:not(.frame-tropical){width:110px;height:110px;flex:0 0 110px;padding:7px}
html .player-frame{--rw:4px;padding:4px}
html .cosmetic-frame-preview{--rw:7px}
/* sulco interno: o avatar parece encaixado no metal */
html .cosmetic-avatar:not(.frame-tropical)::before,
html .player-frame::before,
html .cosmetic-frame-preview::before{
  content:"";position:absolute;inset:calc(var(--rw) - 1.5px);z-index:3;border:0!important;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 3px 5px #000d,inset 0 -1px 2px #fff3,0 1px 1px #fff7,0 -1px 1px #0008;
}
/* brilho especular que percorre o aro */
html .cosmetic-avatar:not(.frame-tropical)::after,
html .player-frame::after,
html .cosmetic-frame-preview::after{
  content:"";position:absolute;inset:0;z-index:4;border-radius:50%;pointer-events:none;
  background:conic-gradient(from var(--cos-spin),#fff0 0 4%,#fffe 8%,#fff0 14%,#fff0 52%,#fff9 57%,#fff0 63%,#fff0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--rw)),#000 calc(100% - var(--rw) + .5px));
          mask:radial-gradient(farthest-side,#0000 calc(100% - var(--rw)),#000 calc(100% - var(--rw) + .5px));
  mix-blend-mode:screen;animation:cos-spin 7s linear infinite;
}
html .cosmetic-avatar .club-avatar,html .cosmetic-avatar .club-avatar-fallback{position:relative;z-index:1;border:0!important;box-shadow:0 0 0 1px #000a}
html .player-frame .player-avatar{border:0!important;box-shadow:0 0 0 1px #000a}
/* Aurora: reflexos iridescentes girando + friso duplo */
html .frame-aurora:not(.cosmetic-card){animation:cos-spin 14s linear infinite}
html .cosmetic-avatar.frame-aurora,html .player-frame.frame-aurora,html .cosmetic-frame-preview.frame-aurora{
  background:var(--knurl),conic-gradient(from var(--cos-spin),#fff3c4,#f1c568 11%,#3fae7c 27%,#a4f5d3 38%,#14503c 52%,#f1c568 70%,#fff3c4 80%,#3fae7c 91%,#fff3c4)!important;
  box-shadow:0 12px 20px #000b,0 3px 5px #0009,0 0 0 1px #ffffff30,0 0 30px var(--glow),
    inset 0 0 0 1.5px #0b3a2c,inset 0 0 0 2.5px #f6dc93aa,inset 0 2px 2px #fffb,inset 0 -3px 4px #000b!important;
}
/* Aurora: um filete luminoso orbita a esfera, separado do reflexo metálico do aro. */
html .cosmetic-avatar.frame-aurora::before,
html .player-frame.frame-aurora::before,
html .cosmetic-frame-preview.frame-aurora::before{
  inset:-4px;z-index:5;border:0;
  background:conic-gradient(from var(--cos-spin),#86ffd000 0 72%,#8fffd3 78%,#f7ffe5 80%,#fff0a4 82%,#8fffd300 89%);
  box-shadow:0 0 8px #83f9c9b3,0 0 17px #65dba16b;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.2px));
  animation:cos-spin 3.8s linear infinite;
}

/* ---------- avatar do perfil: inclinação 3D ---------- */
html .cosmetic-avatar{transform:perspective(520px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
html .cosmetic-avatar:hover{filter:brightness(1.07)}
html .cosmetic-avatar-badge{width:42px;height:42px;right:-9px;bottom:-7px;z-index:5;filter:drop-shadow(0 5px 5px #000c);transform:translateZ(24px)}
html .player-badge{width:24px;height:24px;right:-6px;bottom:-5px;z-index:5;filter:drop-shadow(0 3px 2px #000b)}

/* ---------- Folhagem tropical (PNG) ---------- */
html .cosmetic-avatar.frame-tropical{background:none!important;box-shadow:none!important;margin:34px;width:110px;height:110px;flex:0 0 110px;padding:7px;overflow:visible}
html .cosmetic-avatar-frame-image{position:absolute;left:50%;top:50%;width:200%;max-width:none;height:auto;z-index:4;transform:translate(-50%,-50%) translateZ(12px);pointer-events:none;filter:drop-shadow(0 10px 9px #000b)}
html .cosmetic-avatar-frame-image[hidden]{display:none}
html .player-avatar-tropical{margin:11px}
html .player-tropical-frame{position:absolute;left:50%;top:50%;width:215%;max-width:none;height:auto;z-index:3;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 5px 4px #000b)}
html .cosmetic-tropical-preview{position:relative;z-index:1;display:grid;place-items:center;width:76px;height:76px;transform:perspective(380px) rotateX(var(--rx,8deg)) rotateY(var(--ry,-9deg));transform-style:preserve-3d;transition:transform .15s ease}
html .cosmetic-tropical-preview .cosmetic-frame-core{width:100%;height:100%}
html .cosmetic-tropical-preview img{position:absolute;left:50%;top:50%;width:190%;max-width:none;height:auto;transform:translate(-50%,-50%) translateZ(14px);pointer-events:none;filter:drop-shadow(0 9px 7px #000b)}

/* ---------- vitrine da loja: palco 3D ---------- */
html .cosmetic-stage{perspective:700px;background:radial-gradient(ellipse 60% 45% at 50% 105%,color-mix(in srgb,var(--item-a) 30%,transparent),transparent 70%),radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--item-a) 18%,transparent),transparent 62%),linear-gradient(160deg,var(--item-tint),#0d130f 80%)}
html .cosmetic-stage .cosmetic-halo{animation:cos-float 5s ease-in-out infinite}
html .cosmetic-frame-preview{
  width:84px!important;height:84px!important;padding:7px;
  transform:perspective(380px) rotateX(var(--rx,8deg)) rotateY(var(--ry,-9deg));transform-style:preserve-3d;
}
html .cosmetic-frame-preview .cosmetic-frame-core{position:relative;z-index:1;border:0;background:radial-gradient(circle at 35% 25%,#4a6044,#10170f 72%);box-shadow:inset 0 4px 10px #0009,inset 0 -2px 4px #fff1,0 0 0 1px #000a}
/* emblema: medalha flutuante, sem placa quadrada */
html .cosmetic-badge-plate{width:94px;height:94px;border-radius:0;background:none!important;box-shadow:none!important;
  transform:perspective(420px) rotateX(var(--rx,7deg)) rotateY(var(--ry,-9deg));transform-style:preserve-3d;transition:transform .15s ease}
html .cosmetic-badge-plate::before{display:none}
html .cosmetic-badge-plate img{width:94px;height:94px;filter:drop-shadow(0 12px 8px #000b) drop-shadow(0 0 14px color-mix(in srgb,var(--item-a) 35%,transparent));transform:translateZ(16px)}
html .cosmetic-badge-plate::after{content:"";position:absolute;left:14%;right:14%;bottom:-9px;height:12px;border-radius:50%;background:radial-gradient(#000c,transparent 70%);filter:blur(2px);transform:translateZ(-8px)}
html .cosmetic-card:hover .cosmetic-badge-plate img{filter:drop-shadow(0 16px 9px #000b) drop-shadow(0 0 20px color-mix(in srgb,var(--item-a) 55%,transparent))}

@media (prefers-reduced-motion:reduce){
  html .cosmetic-avatar::after,html .player-frame::after,html .cosmetic-frame-preview::after,
  html .cosmetic-avatar.frame-aurora::before,html .player-frame.frame-aurora::before,html .cosmetic-frame-preview.frame-aurora::before,
  html .frame-aurora:not(.cosmetic-card),html .cosmetic-stage .cosmetic-halo{animation:none!important}
  html .cosmetic-avatar,html .cosmetic-frame-preview,html .cosmetic-badge-plate,html .cosmetic-tropical-preview{transition:none}
}
html .frame-expedition{--m1:#ffedcf;--m2:#d79b61;--m3:#72503a;--m4:#173d2d;--glow:#c18a4e77;--knurl:repeating-conic-gradient(from 4deg,#0000 0 12deg,#4a2b1f45 12deg 15deg)}