/*
============================================================
 SKIBATTLEZ BATTLE ARTWORK SYSTEM V1

 Battle-specific presentation.
 Artwork ownership comes from battles.visual_key.
============================================================
*/


/* =========================================================
   HOME CURRENT BATTLE
========================================================= */

.home-current-battle.battle-artwork-surface {
  background-image:
    linear-gradient(
      90deg,
      rgba(4,7,8,.98) 0%,
      rgba(5,8,9,.94) 43%,
      rgba(5,7,8,.45) 72%,
      rgba(4,6,7,.20) 100%
    ),
    var(--battle-artwork) !important;

  background-position:
    left top,
    76% center !important;

  background-size:
    auto,
    cover !important;

  background-repeat:
    no-repeat !important;
}


/* =========================================================
   HOME LATEST BATTLE CARDS
========================================================= */

.home-battle-card.battle-artwork-surface {
  background-image:
    var(--battle-artwork) !important;

  background-position:
    center !important;

  background-size:
    cover !important;

  background-repeat:
    no-repeat !important;
}


/* =========================================================
   BATTLE DETAIL + RESULT + VOTE DETAIL HERO
========================================================= */

.card.hero.battle-artwork-surface {
  position:relative;

  overflow:hidden;

  min-height:250px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  background:
    linear-gradient(
      90deg,
      rgba(5,8,9,.98) 0%,
      rgba(5,8,9,.91) 48%,
      rgba(5,8,9,.48) 76%,
      rgba(5,8,9,.24) 100%
    ),
    var(--battle-artwork)
    76% center
    /
    cover
    no-repeat !important;

  border-color:
    rgba(229,175,39,.66) !important;

  box-shadow:
    0 16px 38px
      rgba(0,0,0,.38),
    0 0 16px
      rgba(226,171,38,.055) !important;
}


.card.hero.battle-artwork-surface::after {
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 76% 50%,
      transparent 0%,
      transparent 18%,
      rgba(4,6,7,.08) 42%,
      rgba(4,6,7,.32) 76%,
      rgba(4,6,7,.52) 100%
    );
}


.card.hero.battle-artwork-surface > * {
  position:relative;

  z-index:2;
}


/* =========================================================
   /BATTLES LIST
========================================================= */

.track.battle-artwork-surface {
  position:relative;

  overflow:hidden;

  margin-top:14px;

  padding:22px !important;

  border:
    1px solid
    rgba(222,169,38,.35);

  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      rgba(7,10,11,.97),
      rgba(7,10,11,.86) 55%,
      rgba(6,8,9,.46)
    ),
    var(--battle-artwork)
    82% center
    /
    cover
    no-repeat !important;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.24);

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}


.track.battle-artwork-surface:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(235,181,42,.68);

  box-shadow:
    0 14px 32px
      rgba(0,0,0,.32),
    0 0 14px
      rgba(226,171,38,.05);
}


/* =========================================================
   /VOTE INDEX
========================================================= */

.battle-artwork-vote-card {
  position:relative;

  overflow:hidden;

  margin-top:12px;

  padding:
    20px
    22px !important;

  border:
    1px solid
    rgba(222,169,38,.34);

  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      rgba(7,10,11,.98),
      rgba(7,10,11,.87) 58%,
      rgba(6,8,9,.42)
    ),
    var(--battle-artwork)
    84% center
    /
    cover
    no-repeat !important;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.24);
}


/* =========================================================
   SHARED
========================================================= */

.battle-artwork-surface {
  isolation:isolate;
}


@media(max-width:700px) {

  .card.hero.battle-artwork-surface {
    min-height:220px;

    background-position:
      left top,
      68% center !important;
  }


  .track.battle-artwork-surface,
  .battle-artwork-vote-card {
    background:
      linear-gradient(
        90deg,
        rgba(6,9,10,.98),
        rgba(6,9,10,.90),
        rgba(6,9,10,.63)
      ),
      var(--battle-artwork)
      center
      /
      cover
      no-repeat !important;
  }

}