/*----------------------------------
  STORY FRAME WRAPPER
----------------------------------*/

.FrameWrapper {
  position: absolute;
  inset: 0;
  z-index:0;
  pointer-events: none; /* Ensures clicks pass through */
}

svg.full-frame {
  width: 100%;
  height: 100%;
  display: block;
}

.story-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 2rem;
  font-family: sans-serif;
  color: #fff;
  text-align: center;
}

/*----------------------------------
  CORNER SPRITES
----------------------------------*/

.sprite {
  position: absolute;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: cover;
}

/* Individual corner positions with unique background images */
.sprite.tl {
  top: 0;
  left: 0;
  width: 480px;
  height: 360px;
}

.sprite.tr {
  top: 0;
  right: 0;
  width: 480px;
  height: 400px;
}

.sprite.bl {
  bottom: 0;
  left: 0;
  width: 480px;
  height: 410px;
}

.sprite.br {
  bottom: 0;
  right: 0;
  width: 640px;
  height: 240px;
}

/*----------------------------------
  FRAME STYLE GRAPHICS
----------------------------------*/
/* Style A */
.sprite.styleA.tl {
  background-image: url('/assets/static-assets/frame/styleA/tl.svg');
}
.sprite.styleA.tr {
  background-image: url('/assets/static-assets/frame/styleA/tr.svg');
}
.sprite.styleA.bl {
  background-image: url('/assets/static-assets/frame/styleA/bl.svg');
}
.sprite.styleA.br {
  background-image: url('/assets/static-assets/frame/styleA/br.svg');
}

/* Style B */
.sprite.styleB.tl {
  background-image: url('/assets/static-assets/frame/styleB/tl.svg');
}
.sprite.styleB.tr {
  background-image: url('/assets/static-assets/frame/styleB/tr.svg');
}
.sprite.styleB.bl {
  background-image: url('/assets/static-assets/frame/styleB/bl.svg');
}
.sprite.styleB.br {
  background-image: url('/assets/static-assets/frame/styleB/br.svg');
}

/* Style C */
.sprite.styleC.tl {
  background-image: url('/assets/static-assets/frame/styleC/tl.svg');
}
.sprite.styleC.tr {
  background-image: url('/assets/static-assets/frame/styleC/tr.svg');
}
.sprite.styleC.bl {
  background-image: url('/assets/static-assets/frame/styleC/bl.svg');
}
.sprite.styleC.br {
  background-image: url('/assets/static-assets/frame/styleC/br.svg');
}

/* Style D */
.sprite.styleD.tl {
  background-image: url('/assets/static-assets/frame/styleD/tl.svg');
}
.sprite.styleD.tr {
  background-image: url('/assets/static-assets/frame/styleD/tr.svg');
}
.sprite.styleD.bl {
  background-image: url('/assets/static-assets/frame/styleD/bl.svg');
}
.sprite.styleD.br {
  background-image: url('/assets/static-assets/frame/styleD/br.svg');
}

/* Style E */
.sprite.styleE.tl {
  background-image: url('/assets/static-assets/frame/styleE/tl.svg');
}
.sprite.styleE.tr {
  background-image: url('/assets/static-assets/frame/styleE/tr.svg');
}
.sprite.styleE.bl {
  background-image: url('/assets/static-assets/frame/styleE/bl.svg');
}
.sprite.styleE.br {
  background-image: url('/assets/static-assets/frame/styleE/br.svg');
}

/* Style F */
.sprite.styleF.tl {
  background-image: url('/assets/static-assets/frame/styleF/tl.svg');
}
.sprite.styleF.tr {
  background-image: url('/assets/static-assets/frame/styleF/tr.svg');
}
.sprite.styleF.bl {
  background-image: url('/assets/static-assets/frame/styleF/bl.svg');
}
.sprite.styleF.br {
  background-image: url('/assets/static-assets/frame/styleF/br.svg');
}

/* Style G */
.sprite.styleG.tl {
  background-image: url('/assets/static-assets/frame/styleG/tl.svg');
}
.sprite.styleG.tr {
  background-image: url('/assets/static-assets/frame/styleG/tr.svg');
}
.sprite.styleG.bl {
  background-image: url('/assets/static-assets/frame/styleG/bl.svg');
}
.sprite.styleG.br {
  background-image: url('/assets/static-assets/frame/styleG/br.svg');
}