/* Character artwork layer. Deliberately no changes to layout, table sizes, charts or data. */
/* Original upload filenames are preserved exactly. */
.page{position:relative;isolation:isolate}
.page::before{content:"";position:absolute;inset:0 0 auto auto;width:min(46vw,560px);height:500px;z-index:-1;pointer-events:none;background-size:contain;background-repeat:no-repeat;background-position:top right;opacity:.34;filter:drop-shadow(0 0 46px rgba(96,91,255,.48)) drop-shadow(0 20px 34px rgba(0,0,0,.28));}
#page-overview::before{background-image:url("assets/characters/AV_GNHulk.png")}
#page-rosters::before,#page-players::before{background-image:url("assets/characters/AV_LBCA.png")}
#page-piggy::before{background-image:url("assets/characters/AV_BBDrax.png")}
#page-space::before{background-image:url("assets/characters/AV_RaccoonRocket.png"),url("assets/characters/AV_KaboomStar.png"),url("assets/characters/AV_ExplodonSpider.png"),url("assets/characters/AV_ExplodonTerrorist.png");background-size:25% auto,25% auto,25% auto,25% auto;background-position:0 0,33% 0,66% 0,100% 0}
#page-kraken::before{background-image:url("assets/characters/AV_GCIron.png"),url("assets/characters/AV_SirionGamora.png");background-size:49% auto,49% auto;background-position:0 0,100% 0}
#page-records::before,#page-achievements::before{background-image:url("assets/characters/AV_NexusThor.png")}
#page-ratings::before,#page-trends::before{background-image:url("assets/characters/AV_MZGroot.png")}
#page-eventTotals::before,#page-weeklyRecap::before{background-image:url("assets/characters/AV_LBCA.png")}
@media(max-width:800px){.page::before{width:220px;height:240px;opacity:.20}}
/* Gold/blue glow: the first mockup's palette, without modifying dimensions. */
.brand-title{text-shadow:0 0 14px rgba(255,205,76,.18)}
.topbar{box-shadow:0 1px 20px rgba(54,106,255,.065)}
.page .panel,.page .card{border-color:rgba(108,145,255,.23)}

/* Space Race displays both original Explodon versions alongside Raccoon and Kaboom. */

/* Emphasize the featured champions without altering the page layout. */
#page-space::before,#page-kraken::before{width:min(52vw,640px);height:540px;opacity:.40;filter:drop-shadow(0 0 54px rgba(96,91,255,.55)) drop-shadow(0 22px 38px rgba(0,0,0,.30));}
@media(max-width:800px){#page-space::before,#page-kraken::before{width:220px;height:240px;opacity:.24}}

/* Visible mascot layer: renders over opaque chart/card backgrounds.
   Purely decorative, click-through, and does not affect document layout. */
.page{isolation:isolate}
.page::before{
  z-index:3;
  top:6px;
  right:6px;
  width:min(34vw,365px);
  height:315px;
  opacity:.57;
  background-position:top right;
  filter:drop-shadow(0 6px 17px rgba(0,0,0,.60)) drop-shadow(0 0 22px rgba(76,201,255,.22));
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 77%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 77%,transparent 100%);
}
#page-space::before{
  width:min(62vw,700px);
  height:300px;
  opacity:.62;
  background-size:24% auto,24% auto,24% auto,24% auto;
  background-position:0% 0%,34% 0%,68% 0%,100% 0%;
}
#page-kraken::before{
  width:min(43vw,480px);
  height:340px;
  opacity:.61;
  background-size:48% auto,48% auto;
  background-position:0% 0%,100% 0%;
}
@media(max-width:800px){
  .page::before{width:145px;height:165px;opacity:.48;top:6px;right:0}
  #page-space::before{width:min(75vw,320px);height:160px;opacity:.70}
  #page-kraken::before{width:200px;height:175px;opacity:.70}
}