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

/* Selve den gjennomsiktige rammen */
.game-box {
  position: relative;
  border: 1px solid #ffffff; 
  border-radius: 20px;       
  width: 150px;  
  height: 150px; 
  display: inline-block; 
  margin: 15px;
  /* Vi fjerner overflow: hidden så skyggen kan titte frem på utsiden */
  overflow: visible; 
}

/* RGB-skyggen som tvinges HELT BAKERST */
.game-box::before {
  content: '';
  position: absolute;
  top: -3px;   
  left: -3px;
  right: -3px;
  bottom: -3px;
  z-index: -2; /* Flyttet til -2 for å ligge bak alt */
  background: conic-gradient(from var(--angle), #00ffff, #0088ff, #0000ff, #8800ff, #aa00ff, #00ffff);
  border-radius: 22px;
  filter: blur(12px); 
  opacity: 0.5;       
  animation: rotateRGB 4s linear infinite; 
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Innholdet (Apple-ikonet) som tvinges HELT FREST */
.box-content {
  position: relative;
  z-index: 2; /* Låser ikonet foran fargene */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

@keyframes rotateRGB {
  to {
    --angle: 360deg;
  }
}