/* Exclusivos vistos pelos outros (v0.267, js/ui/raid-look.js): selo antes do nome e moldura no cartão. A cor do nome vai no
   style do próprio nome. v0.322: molduras das conquistas da Campanha (data/profile-looks.js), uma classe look-frame-<id> por
   moldura com o degradê na variável --look-frame; as de Impossível e Pesadelo pulsam devagar, e param com movimento reduzido. */

.raid-badge {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
}

/* Anel de 2 px por dentro da borda do cartão, para não cobrir a faixa de estado (pronto, esperando) da esquerda. */
.raid-frame {
  position: relative;
}

.raid-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: var(--look-frame, linear-gradient(135deg, #ff7a3a, #ffc070 50%, #ff7a3a));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Degradês das molduras da Campanha: Mundo 1 com a cor forte nas pontas, Mundo 2 com a clara (mesmos tons de data/profile-looks.js). */
.look-frame-w1_basic { --look-frame: linear-gradient(135deg, #2ecc71, #a8f0c6 50%, #2ecc71); }
.look-frame-w1_normal { --look-frame: linear-gradient(135deg, #3498db, #a9d6f5 50%, #3498db); }
.look-frame-w1_hard { --look-frame: linear-gradient(135deg, #e67e22, #ffc98c 50%, #e67e22); }
.look-frame-w1_impossible { --look-frame: linear-gradient(135deg, #e74c3c, #ffaa9f 50%, #e74c3c); }
.look-frame-w1_nightmare { --look-frame: linear-gradient(135deg, #9b59b6, #e2b8f5 50%, #9b59b6); }
.look-frame-w2_basic { --look-frame: linear-gradient(135deg, #a8f0c6, #2ecc71 50%, #a8f0c6); }
.look-frame-w2_normal { --look-frame: linear-gradient(135deg, #a9d6f5, #3498db 50%, #a9d6f5); }
.look-frame-w2_hard { --look-frame: linear-gradient(135deg, #ffc98c, #e67e22 50%, #ffc98c); }
.look-frame-w2_impossible { --look-frame: linear-gradient(135deg, #ffaa9f, #e74c3c 50%, #ffaa9f); }
.look-frame-w2_nightmare { --look-frame: linear-gradient(135deg, #e2b8f5, #9b59b6 50%, #e2b8f5); }

.look-frame-w1_impossible::after,
.look-frame-w2_impossible::after,
.look-frame-w1_nightmare::after,
.look-frame-w2_nightmare::after {
  animation: look-frame-pulse 2.8s ease-in-out infinite;
}

@keyframes look-frame-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.45) saturate(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .raid-frame::after {
    animation: none;
  }
}