.reel-stage {
  width: 100%; 
  max-width: 1100px; 
  height: 650px;
  margin: 60px auto;
  background-image: url('img/centerBackground.png');
  background-size: 100% 100%;
  position: relative;
  z-index: 5;
}

.reel-container {
  position: absolute; 
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%; 
  height: 82%;
  max-width: 800px; 
  z-index: 10;
  cursor: pointer;
  pointer-events: auto;
}

#reel { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.6); 
}

#canvas-reel {
  width: 100%; 
  height: 100%; 
  position: absolute; 
  top: 0; 
  left: 0;
  z-index: 20; 
  opacity: 0; 
  transition: opacity 0.4s ease-in; 
  pointer-events: none; 
}

#canvas-reel.ready { opacity: 1; }
#canvas-reel canvas { display: block; position: absolute; bottom: 0; width: 100%; }

.info-reel {
  position: absolute; 
  bottom: 0; 
  width: 100%; 
  padding: 30px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  pointer-events: none; 
  z-index: 30;
}

.info-reel h2 { font-size: 1.8rem; color: #fff; text-transform: uppercase; }
.info-reel p { font-size: 1rem; color: #bbb; }

.overlay-link {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  z-index: 40; 
  cursor: pointer;
}