$grey: #2d3032;
$joy-con-left: #00a0bd;
$joy-con-right: #ff5b4d;
$sel-big-diag: #b01e64;
$sel-med-diag: #c5486d;
$sel-sml-diag: #d5818d;
$sel-bg: #b6b4d2;

* {
  box-sizing: border-box;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 10px;
  font: 800 100% system-ui;
}

.container {
  display: grid;
  width: 100%;
  height: 100vh;
  place-items: center;
}

.switch {
  height: 470px;
  display: flex;

  &:before {
    display: block;
    content: "";
    padding-bottom: calc(100% * 9 / 16);
  }
}

.bezel-bezel {
  padding: 0.5rem 1rem;
  background: $grey;
  clip-path: polygon(
    0% 2%,
    1% 2%,
    1% 0%,
    99% 0%,
    99% 2%,
    100% 2%,
    100% 98%,
    100% 100%,
    85% 100%,
    15% 100%,
    0 100%,
    0% 85%
  );
}

.bezel {
  padding: 1.5rem 2rem;
  background: #0c0c0e;
  background-clip: padding-box;
  border-radius: 1em;
}

.joy-con {
  height: 470px;
  width: 135px;

  &.left {
    background: 
      linear-gradient(#0c0c0e 0% 100%) 80% 30px / 22px 5px, 
      radial-gradient(circle, #2d3032 40%, #0c0c0e 44% 50%, transparent 50%) 50% 90px / 85px 85px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 50% 205px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 50% 275px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 20% 240px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 80% 240px / 35px 35px,
      linear-gradient(#0c0c0e 0% 100%) 80% 330px / 22px 22px, 
      $joy-con-left;
    background-repeat: no-repeat;
    border-radius: 65% 1% 0% 65% / 20% 1% 0% 20%;
  }

  &.right {
    background: 
      linear-gradient(#0c0c0e 0% 100%) 20% 30px / 22px 5px, 
      linear-gradient(#0c0c0e 0% 100%) 24% 22px / 5px 22px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 50% 75px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 50% 145px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 20% 110px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 80% 110px / 35px 35px,
      radial-gradient(circle, #2d3032 40%, #0c0c0e 44% 50%, transparent 50%) 50% 220px / 85px 85px,
      radial-gradient(circle, #0c0c0e 45%, #8a8c8e 45% 55%, transparent 55%) 20% 330px / 35px 35px,
      $joy-con-right;
    background-repeat: no-repeat;
    border-radius: 1% 65% 65% 0% / 1% 20% 20% 0%;
    margin-left: -1px;
  }
}

.screen {
  width: 720px;
  height: calc(720px * 9 / 16);
  background: white;
  display: grid;
  grid-template-rows: 10% 59% 1fr;
}

.header {
  display: flex;
  background: linear-gradient(358deg, #ac0104 60%, transparent 61%) 0% 0/100%
      50%,
    linear-gradient(to right, #cbdfe9 20%, #fede57 40%) 0 0 / 100% 50%,
    linear-gradient(#000 0% 100%);
  background-repeat: no-repeat;
  height: 100%;
}

.options {
  background: linear-gradient(
    120deg,
    #ac010f 45%,
    #870104 45% 85%,
    transparent 85%
  );
  width: 125px;
  height: 90%;
  position: relative;
  &:before {
    display: block;
    content: "";
    height: 100%;
    width: 45px;
    font-size: 8px;
    position: relative;
    left: 1em;
    background: linear-gradient(
          0deg,
          #fb7073 0.35em,
          #ac010f 0.35em 0.65em,
          #fb7073 0.65em
        )
        1.9em 1em / 0.9em 1em,
      linear-gradient(135deg, transparent 49%, #fb7073 50%) 1em 0.3em / 1.2em
        1.2em,
      linear-gradient(45deg, transparent 49%, #fb7073 50%) 1em 1.5em / 1.2em
        1.2em,
      radial-gradient(
          circle at left,
          transparent 0.45em,
          #fb7073 0.5em 0.85em,
          transparent 0.85em 1.15em,
          #fb7073 1.15em 1.5em,
          transparent 1.55em
        )
        2.75em 1em / 3em 3em,
      linear-gradient(
          0deg,
          #fb7073 0.35em,
          #ac010f 0.35em 0.65em,
          #fb7073 0.65em
        )
        2.3em 3em / 0.5em 1em;
    background-repeat: no-repeat;
  }

  &:after {
    display: block;
    content: "";
    height: 75%;
    width: 2.6em;
    font-size: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3.6em;
    background: radial-gradient(
          circle at right,
          #870104 0.1em,
          transparent 0.1em
        ) -0.6em 0/1em 1em,
      linear-gradient(0deg, #870104 0% 100%) 0.3em 0.3em/2em 0.3em,
      radial-gradient(circle at left, #870104 0.1em, transparent 0.1em) 2.3em
        0em/1em 1em,
      linear-gradient(#ff7073 0% 100%);
    border-radius: 15% 2% 2% 15% / 15% 2% 2% 15%;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
  }
}
.battle-type {
  width: 50%;
  position: relative;
  top: 5%;
  background: linear-gradient(0deg, #000 0% 15%, transparent 15%) 50% -85%/77% 50%,
    linear-gradient(0deg, #000 0% 15%, transparent 15%) 50% 100%/77% 50%,
    linear-gradient(
        45deg,
        transparent 10%,
        #000 10% 12%,
        #fede57 12% 50%,
        transparent 50%
      )
      0% 100%/100% 50%,
    linear-gradient(
        135deg,
        transparent 10%,
        #000 10% 12%,
        #fede57 12% 50%,
        transparent 50%
      )
      0% 0%/100% 50%,
    linear-gradient(
        135deg,
        transparent 50%,
        #fede57 50% 88%,
        #000 88% 90%,
        transparent 90%
      )
      0% 100%/100% 50%,
    linear-gradient(
        45deg,
        transparent 50%,
        #fede57 50% 88%,
        #000 88% 90%,
        transparent 90%
      )
      100% 0%/100% 50%,
    linear-gradient(#fede57 0% 100%) 50% 50% / 50% 50%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;

  &:before {
    display: block;
    content: "";
    position: absolute;
    right: 12%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    border-top: 10px solid #7f5d29;
  }
}

.characters-container {
  width: 100%;
  background-color: #000;
  padding: 0.5em 0.5em 0.5em;
}

.characters {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(13, calc(100% / 12.99));
  font: 800 50% system-ui;
  background: linear-gradient(to bottom right, #448fe5, #fede57);
}

.characters > div, .characters > .last-row > div {
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  background-repeat: no-repeat;
  position: relative;
  border: 1px solid black;

  &:before {
    content: "";
    padding-bottom: 66%;
    display: block;
  }

  & > span {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    text-align: center;
    overflow-wrap: break-word;
  }
}

.aang {
  background: url("https://cdn130.picsart.com/313639937062211.png?type=webp&to=min&r=240");
  background-size: 30px 38px;
}

.katara {
  background: url("https://nick-intl.mtvnimages.com/uri/mgid:file:gsp:kids-assets:/nick/properties/avatar/characters/katara-character-web-desktop.png?height=0&width=480&matte=true&crop=false");
  background-size: 160px 153px;
    background-position: -63px -41px;
}

.sokka {
  background: url("https://upload.wikimedia.org/wikipedia/en/c/cc/Sokka.png"),
    padding-box;
      background-size: 67px 81px;
    background-position: 7px -3px;
}

.toph {
  background: url("https://nick-intl.mtvnimages.com/uri/mgid:file:gsp:kids-assets:/nick/properties/avatar/characters/toph-character-web-desktop.png?height=0&width=480&matte=true&crop=false");
  background-size: 160px 153px;
    background-position: -63px -29px;
}

.zuko {
  background: url("https://vignette.wikia.nocookie.net/villains/images/2/23/Principe_zuko_by_yuzumi2000-d6lbrj4.png/revision/latest?cb=20170611234341");
  background-size: 350% 350%;
  background-position: 55% 25%;
}

.suki {
  background: url("https://vignette.wikia.nocookie.net/p__/images/f/f7/Suki_%28Avatar%29.png/revision/latest?cb=20200608031102&path-prefix=protagonist");
  background-position: 25% 21%;
    background-size: 126px 253px;
}

.uncle-iroh {
  background: url("https://cdn130.picsart.com/314979716371211.png?type=webp&to=min&r=480");
  background-size: 105px 80px;
    background-position: 50% -8px;
}

.azula {
  background: url("https://vignette.wikia.nocookie.net/villains/images/a/ac/Azula_Render.png/revision/latest/top-crop/width/360/height/450?cb=20170715180812");
  background-size: 90px 113px;
    background-position: 72% 26%;
}

.ty-lee {
  background: url("https://vignette.wikia.nocookie.net/villains/images/6/6d/Ty_Lee.png/revision/latest/top-crop/width/360/height/450?cb=20200626041512");
      background-size: 90px 113px;
    background-position: 37% 18%;
}

.mai {
  background: url("https://cdn140.picsart.com/332349869025211.png?type=webp&to=min&r=240");
  background-size: 60px 63px;
    background-position: 50% 4%;
}

.ozai {
  background: url("https://vignette.wikia.nocookie.net/villains/images/e/e7/Ozai_Render.png/revision/latest/top-crop/width/360/height/450?cb=20200403045627");
  background-size: 90px 113px;
    background-position: 72% 12%;
}

.roku {
  background: url("https://64.media.tumblr.com/67a7a84b854877742e001f18df520ffe/tumblr_p4si8dVN7p1tyjd90o1_400.png");
  background-size: 190% 190%;
    background-position: -33% 36%;
}

.jet {
  background: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2ce65474-ccdb-427a-9a86-367308a340c3/dbagr5n-1afd4265-f0d7-4f90-8c85-12d1841d5bf6.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMmNlNjU0NzQtY2NkYi00MjdhLTlhODYtMzY3MzA4YTM0MGMzXC9kYmFncjVuLTFhZmQ0MjY1LWYwZDctNGY5MC04Yzg1LTEyZDE4NDFkNWJmNi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.xBXBXcL4Dq5knijiKGT_zHKfzl7q0H4_fBrQ6Md6Jms");
  background-size: 124px 139px;
    background-position: 64% 18%;
}

.pipsqueak {
  background-image: url('https://64.media.tumblr.com/0370bbf19238114e6381a62cc3d1eed0/tumblr_p2mak6FIKD1tyjd90o1_250.png');
  background-size: 94px 151px;
    background-position: 52% 4%;
}

.combustion-man {
  
  background-image: url('https://vignette.wikia.nocookie.net/vsbattles/images/1/1b/Tumblr_p4q1ez5NI91tyjd90o1_250.png/revision/latest?cb=20190215013325');
  background-size: 94px 151px;
    background-position: 52% 4%;
}

.admiral-zhao {
  background-image: url('https://vignette.wikia.nocookie.net/villains/images/d/d4/General_Zhao.png/revision/latest/top-crop/width/360/height/450?cb=20200607023441');
  background-size: 90px 120px;
  background-position: 10% 10%;
}

.hakoda {
  background-image: url('https://64.media.tumblr.com/1987a086e8a630fce36eaf5e914ac02e/tumblr_p47uac1mPR1tyjd90o1_250.png');
  background-size: 94px 151px;
    background-position: 32% 4%;
}

.the-boulder {
  background-image: url('https://cdn141.picsart.com/330128437043211.png?type=webp&to=min&r=240');
  background-size: 93px 110px;
  background-position: 80% 10%;
}

.king-bumi {
  background-image: url('https://vignette.wikia.nocookie.net/p__/images/6/6e/King_Bumi_Render.png/revision/latest/top-crop/width/360/height/450?cb=20190214211947&path-prefix=protagonist');
  background-size: 90px 113px;
  background-position: 20% 0%;
}

.pakku {
  background-image: url('https://cdn130.picsart.com/333233450054211.png?type=webp&to=min&r=1280');
  background-size: cover;
}

.piandao {
  background-image: url('https://static1.comicvine.com/uploads/original/11129/111295032/5383098-2254338212-Piand.png');
background-size: 125px 96px;
    background-position: 50% 27%;
}

.jeong-jeong {
  background-image: url('https://1.bp.blogspot.com/-DFzBUNhzvi0/XwlhWmjmXbI/AAAAAAAAHC4/pQhQ1_Bn3sgZ_SwWdcI9CVgAftt4oxQrwCNcBGAsYHQ/w125-h200/tumblr_p2xfq7ir2o1tyjd90o1_250.png');
  background-position: 50% 10%;
}

.long-feng {
  background-image: url('https://64.media.tumblr.com/22684331e14c92bc411976ce59225e3f/tumblr_p3wrtqkwRD1tyjd90o1_250.png');
      background-size: 82px 180px;
    background-position: -13px -2px;
}

.huu {
  background-image: url('https://66.media.tumblr.com/7356901de6a103d3b110cc7f70e02a5a/tumblr_p3coh1mzxW1tyjd90o1_500.png');
  background-size: 115px 100px;
  background-position: 50% 32%;
}

.gyatso {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/gyatso.png');
  background-size: cover;
  background-position: 0% 30%;
}

.hama {
  background-image: url('https://64.media.tumblr.com/2222f77ed79e07f107ed3e32f273411f/tumblr_p4w0uiqPUr1tyjd90o1_250.png');
  background-size: 94px 151px;
    background-position: 32% 4%;
}

.june {
  background-image: url('https://64.media.tumblr.com/1f4cef5246519a17521342385c946ab5/tumblr_p5cyji8C5K1tyjd90o1_250.png');
  background-size: 66px 200px;
  background-position: 100% 6%;
}

.korra {
  background-image: url('https://cdn130.picsart.com/270253092011211.png?type=webp&to=min&r=640');
  background-size: 92px 86px;
  background-position: 70% 10%;
}

.mako {
  background-image: url('https://vignette.wikia.nocookie.net/p__/images/6/6f/Mako-0.png/revision/latest/top-crop/width/360/height/450?cb=20150922163724&path-prefix=protagonist');
  background-size: 90px 113px;
    background-position: 10% 20%;
}

.bolin {
  background-image: url('https://nick-intl.mtvnimages.com/uri/mgid:file:gsp:kids-assets:/nick/properties/legend-of-korra/characters/bolin-character-web-desktop.png?height=0&width=480&matte=true&crop=false');
  background-size: 120px 113px;
  background-position: 70% 15%;
}

.asami {
  background-image: url('https://i.pinimg.com/originals/d5/72/fb/d572fb617af19e7332a23632b35f4eac.png');
  background-size: 73px 141px;
  background-position: 10% 12%;
}

.tenzin {
  background-image: url('https://vignette.wikia.nocookie.net/nickelodeon/images/d/d6/Tenzin.png/revision/latest?cb=20200301062511');
  background-size: 160px 148px;
  background-position: 40% 5%;
}

.lin-beifong {
  background-image: url('https://vignette.wikia.nocookie.net/p__/images/2/22/Linbeifong.png/revision/latest/top-crop/width/360/height/450?cb=20151028200838&path-prefix=protagonist');
  background-size: 90px 113px;
    background-position: 30% 5%;
}

.amon {
  background-image: url('https://vignette.wikia.nocookie.net/villains/images/8/84/Amon-Full-Body-Render-amon-36836979-526-1016.png/revision/latest?cb=20200626065332');
  background-size: 175px 339px;
  background-position: 60% 12%;
}

.lieutenant {
  background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/04e00fc4-400f-4c87-9e7a-9efa27c5cb0c/d5bgcf2-28d66a3a-9c51-4f9d-b7e3-01133cd42714.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMDRlMDBmYzQtNDAwZi00Yzg3LTllN2EtOWVmYTI3YzVjYjBjXC9kNWJnY2YyLTI4ZDY2YTNhLTljNTEtNGY5ZC1iN2UzLTAxMTMzY2Q0MjcxNC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.1VIsk9HIFAso8Dj8QyezpYToH0m68jp3vot42Mk8-RI');
  background-size: 160px 165px;
  background-position: 30% 5%;
}

.tahno {
  background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4162efc0-2b20-4d54-a195-a45691d720ed/d5anhq1-61fa103b-4276-4ee8-9a2b-f86ff4f07fa6.png/v1/fill/w_700,h_352,strp/tahno__the_last_hairbender_by_luvlegendofkorra_d5anhq1-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0zNTIiLCJwYXRoIjoiXC9mXC80MTYyZWZjMC0yYjIwLTRkNTQtYTE5NS1hNDU2OTFkNzIwZWRcL2Q1YW5ocTEtNjFmYTEwM2ItNDI3Ni00ZWU4LTlhMmItZjg2ZmY0ZjA3ZmE2LnBuZyIsIndpZHRoIjoiPD03MDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.SLboxqt2jm4RkLL2j5rw9_F76WlHmtfjANjZ7DZVd8s');
  background-size: 140px 70px;
  background-position: 80% 0%;
}

.jinora {
  background-image: url('https://i.pinimg.com/originals/75/7d/f8/757df8198b03c25324a8b8df8cdf26f0.png');
  background-size: 114px 157px;
  background-position: 40% 8%;
}

.ikki {
  background-image: url('https://cdn140.picsart.com/336436372045211.png?type=webp&to=min&r=240');
  background-size: 60px 70px;
  background-position: 0% 5%;
}

.meelo {
  background-image: url('https://static.zerochan.net/Avatar%3A.The.Legend.of.Korra.full.2455898.png');
  background-size: 267px 360px;
  background-position: 63% 58%;
}

.general-iroh {
  background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e9b01209-c378-4e1b-8533-1c545b4f60ac/d63sjr5-4889181f-4a23-45cb-9124-5caf79bcae43.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvZTliMDEyMDktYzM3OC00ZTFiLTg1MzMtMWM1NDViNGY2MGFjXC9kNjNzanI1LTQ4ODkxODFmLTRhMjMtNDVjYi05MTI0LTVjYWY3OWJjYWU0My5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.7lyyGUCSInvTgkwvIvGkry-7RtqH8sml8e3gOZg3t5c');
  background-size: 110px 210px;
  background-position: 50% 10%;
}

.tarrlok {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/tarrlok.png');
  background-size: cover;
}

.tonraq {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/tonraq.png');
    background-size: cover;
}

.unalaq {
  background-image: url('https://vignette.wikia.nocookie.net/villains/images/7/7c/Unalaq.png/revision/latest/top-crop/width/180/height/135?cb=20200907042846');
  background-size: 90px 67px;
  background-position: 70% 40%; 
}

.ed {
 background-image: url('https://s3.amazonaws.com/petergarrow.com/images/eska-desna.png');
  background-size: 88px 50px;
  background-position: 50% 20%;
}

.wan {
  background-image: url('https://wyspstore2.s3.amazonaws.com/posts/840151001v3.png');
  background-size: 120px 124px;
  background-position: 10% 10%;
}

.general-bumi {
  background-image: url('https://38.media.tumblr.com/f21e9cde3d42b391ef740956dec05631/tumblr_ncnu89J4jg1qkwdtzo1_r1_1280.png');
  background-size: 267px 178px;
  background-position: 70% 5%;
}

.kya {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/kya.png');
  background-size: 60px 75px;
  background-position: 50% 40%;
}

.tzu-li {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/zhu-li.png');
  background-size: cover;
}

.vatuu {
  background-image: url('https://vignette.wikia.nocookie.net/vsbattles/images/c/cb/Vaatu_mega_by_saxonxvi-d73v17k.png/revision/latest?cb=20151023125909');
  background-size: cover;
}

.raava {
  background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/83dd7847-3f8e-4e81-bc6c-de0e7039d8be/d73uyxu-22d91a1b-72c0-433c-a459-4a010634ec45.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvODNkZDc4NDctM2Y4ZS00ZTgxLWJjNmMtZGUwZTcwMzlkOGJlXC9kNzN1eXh1LTIyZDkxYTFiLTcyYzAtNDMzYy1hNDU5LTRhMDEwNjM0ZWM0NS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.PwuK97NV9O2llOIe4taPHYDjtTtmJr2wzGfQYG-3CZY');
  background-size: cover;
}

.aye-aye {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/aye-aye.png');
  background-size: cover;
}

.zaheer {
  background-image: url('https://vignette.wikia.nocookie.net/vsbattles/images/7/79/Zaheer_render_by_legendaryrey-d7wyzuo.png/revision/latest/scale-to-width-down/340?cb=20151023125447');
  background-size: 113px 87px;
  background-position: 70% 10%;
}

.pli {
  background-image: url("https://s3.amazonaws.com/petergarrow.com/images/p'li.png");
  background-size: cover;
}

.ming-hua {
  background-image: url('https://vignette.wikia.nocookie.net/vsbattles/images/c/c4/Ming_hua_render_by_legendaryrey-d7wz088.png/revision/latest?cb=20151031112305');
  background-size: 120px 116px;
  background-position: 60% 60%;
}

.ghazan {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/ghazan.png');
  background-size: cover;
  background-position: 0% 20%;
}

.suyin {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/suyin.png');
  background-size: cover;
}

.opal {
  background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/65cc28bf-d46a-4459-8d83-e94298a26133/d90vcaq-551f734e-df32-4fb7-b7e5-e449d926b2bb.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNjVjYzI4YmYtZDQ2YS00NDU5LThkODMtZTk0Mjk4YTI2MTMzXC9kOTB2Y2FxLTU1MWY3MzRlLWRmMzItNGZiNy1iN2U1LWU0NDlkOTI2YjJiYi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.IN-NuZZ7JpyspXqDI7PKg4yVzYe1DA2h06UeGZzXGlQ');
  background-size: 241px 180px;
  background-position: 20% 40%;
}

.kai {
  background-image: url('https://cdn130.picsart.com/335146149012211.png?type=webp&to=min&r=240');
  background-size: 120px 188px;
  background-position: 30% 10%;
}

.ww {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/wing-wei.png');
  background-size: cover;
}

.kuvira {
  background-image: url('https://vignette.wikia.nocookie.net/p__/images/e/ec/Kuvira.png/revision/latest/top-crop/width/360/height/450?cb=20190214014419&path-prefix=protagonist');
      background-size: 90px 113px;
    background-position: 20% 10%;
}

.kyoshi {
  background-image: url('https://external-preview.redd.it/qPxQdHYGBIwX9HMnWt7TgpPikb3I4KzzYX9OJ1eJDBg.png?auto=webp&s=972da68715fae2a1cddab552edbb33149236c798');
  background-size: 100px 87px;
  background-position: 50% 80%;
}

.yangchen {
  background-image: url('https://i.pinimg.com/originals/ac/74/c5/ac74c5693b20eaa25fde56fecedca272.png');
  background-size: 156px 174px;
  background-position: 50% 3%;
}

.kuruk {
  background-image: url('https://i.pinimg.com/originals/71/ba/c7/71bac7b6cfc6257d0ada7093e1ddd43f.png');
  background-size: 156px 174px;
  background-position: 50% 5%;
}

.haru {
  background-image: url('https://64.media.tumblr.com/60527750388d85d2d865efca52bc97dd/tumblr_p4zzmmnH8X1tyjd90o1_250.png');
      background-size: 94px 151px;
    background-position: 50% 4%;
}

.smellerbee {
  background-image: url('https://i.pinimg.com/originals/bc/fd/f1/bcfdf15061bd3f9fbdc64a6726c8e4ce.png');
  background-size: 112px 163px;
  background-position: 50% 25%;
}

.long-shot {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/longshot.png');
  background-size: cover;
}

.xin-fu {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/xin-fu.png');
  background-size: cover;
  background-position: 0% 40%;
}

.waterbender {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/waterbender.png');
  background-size: cover;
}

.air-nomad {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/air-bender.png');
  background-size: 166px 125px;
  background-position: 50% 30%;
}

.swampbender {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/swampbender.png');
  background-size: cover;
}

.sandbender {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/sandbender.png');
  background-position: 0% 40%;
  background-size: cover;
}

.fn-soldier {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/fire-nation-soldier.png');
  background-size: cover;
}

.dai-li {
  background-image: url('https://64.media.tumblr.com/719c06b8ed2027a907a4e74a0facf1f2/tumblr_p51agr0h501tyjd90o1_250.png');
  background-size: 125px 200px;
  background-position: 50% 15%;
}

.white-lotus {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/white-lotus.png');
  background-size: cover;
}

.random-char {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/Questionmark.png');
  background-size: 23px 33px;
  background-position: 50%;
  
}

.selection-container {
  background: radial-gradient(
    at top right,
    #e9ece2 5%,
    #1f82e4 32% 45%,
    #432d93 92%
  );

  background-repeat: no-repeat;
  display: grid;
  padding: 0.5em 0.5em 0em;
  grid-template-columns: 47.5% 47.5% 1fr;
  grid-gap: 0.5em;
}

.selection {
  &.cpu {
    $sel-big-diag: #707070;
    $sel-med-diag: #a5a5a5;
    $sel-sml-diag: #cfcfcf;
    $sel-bg: #dbdbdb;
    background: linear-gradient(135deg, #000 0% 34px, transparent 34px),
       linear-gradient(15deg, $sel-sml-diag 25%, transparent 25%),
    linear-gradient(25deg, $sel-med-diag 35%, transparent 35%),
    linear-gradient(40deg, $sel-big-diag 50%, transparent 50%),
      linear-gradient($sel-bg 0% 100%);
  }
  height: 100%;
  width: 100%;
  border-top: 0.5em solid black;
  border-right: 0.2em solid black;
  border-left: 0.2em solid black;
  clip-path: polygon(45px 0, 100% 0, 100% 100%, 0 100%, 0% 45px);
  background: linear-gradient(135deg, #000 0% 34px, transparent 34px),
    linear-gradient(15deg, $sel-sml-diag 25%, transparent 25%),
    linear-gradient(25deg, $sel-med-diag 35%, transparent 35%),
    linear-gradient(40deg, $sel-big-diag 50%, transparent 50%),
    linear-gradient($sel-bg 0% 100%);
  background-repeat: none;
  position: relative;
}

.qm {
  background: url('https://s3.amazonaws.com/petergarrow.com/images/Questionmark.png');
  height: 100px;
  width: 78px;
  background-size: cover;
  position: absolute;
  left: 50px;
}

.p1-overlay {
  height: calc(100% + 1px);
  width: 60%;
  position: relative;
  top: -1px;
  left: 40%;
  clip-path: polygon(0px 0%, 100% 0%, 100% 100%, 0% 100%);
  background: 
    linear-gradient(108deg, transparent 17%, rgba(0, 0, 0, .2) 17% 19%, rgb(254, 54, 53) 19% 20%, blue 20%),
    ;
  background-repeat: no-repeat;
  z-index: 1000;
  &:before {
    content: '';
    display: block;
    height: 100%;
    position: relative;
    width: calc(100% - 10px);
    left: 10px;
    clip-path: polygon(35px 0%, 100% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(15deg, #f37b6d 8%, transparent 8%),
    linear-gradient(25deg, #db413b 14%, transparent 14%),
    linear-gradient(40deg, #b70506 30%, transparent 30%),
      rgb(254, 54, 53);
    z-index: -100;
  }
  
  &:after {
    display: block;
    content: '';
    background-image: url('https://s3.amazonaws.com/petergarrow.com/images/p1hand.png');
  background-size: cover;
  height: 54px;
  width: 49px;
  position: absolute;
  top: 5%;
  left: 45%;
  }
}

.cpu-overlay {
  height: calc(100% + 1px);
  width: 60%;
  position: relative;
  top: -1px;
  left: 40%;
  clip-path: polygon(0px 0%, 100% 0%, 100% 100%, 0% 100%);
  background:
    linear-gradient(108deg, transparent 17%, rgba(0, 0, 0, .2) 17% 19%, #afafaf 19% 20%),
    ;
  background-repeat: no-repeat;
  z-index: 1000;
  &:before {
    content: '';
    display: block;
    height: 100%;
    position: relative;
    width: calc(100% - 10px);
    left: 10px;
    clip-path: polygon(35px 0%, 100% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(15deg, #afafaf 8%, transparent 8%),
    linear-gradient(25deg, #939393 14%, transparent 14%),
    linear-gradient(40deg, #676767 30%, transparent 30%),
      #a1a1a1;
    z-index: -100;
  }
}

.p1-hand {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/p1hand.png');
  background-size: cover;
  height: 54px;
  width: 49px;
  position: absolute;
  top: 5%;
  left: 45%;
}

.p1-title {
  width: 50%;
  height: 1.5em;
  border: 1px solid black;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-40%);
  background: #fba0a1;
  display: grid;
  place-items: center;
  font-size: 80%
}

.random {
  width: 60%;
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-40%);
  text-align: right;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  font-size: 110%;
}

.cpu-lvl {
  width: 50%;
  height: 1.5em;
  border: 1px solid black;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-40%);
  background: 
    linear-gradient(110deg, #212121 2px, black 2px 3px, #212121 3px 5px, black 5px 6px, #212121 6px 8px, black 8px 9px, #212121 9px 11px, black 11px 12px, #212121 12px 14px, black 14px 15px, #212121 15px 17px, black 17px 18px, #212121 18px 20px, black 20px 21px, #212121 21px 23px, black 23px 24px, #212121 24px 26px, black 26px 27px, #212121 27px 29px, black 29px 30px, #212121 30px 32px, black 32px 33px, #212121 33px 35px, black 35px 36px, #212121 36px 38px, black 38px 39px, #212121 39px 41px, black 41px 42px, #212121 42px 44px, black 44px 45px, #212121 45px 47px, black 47px 48px, #212121 48px 50px, black 50px 51px, #212121 51px 53px, black 53px 54px, #212121 54px 56px, black 56px 57px, #212121 57px 59px, black 59px 60px,  transparent 60px 100%),
    #a2a2a2;
  display: grid;
  place-items: center;
  font-size: 80%;
  display: flex;
  justify-content: space-between;
  padding: 0 .5em;
  
  & span {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  }
  
  & span:first-of-type {
    color: #acacac;
  }
  
  & span:last-of-type {
    color: #36f6e9;
  }
}

.label {
  width: 53%;
  height: 1.5rem;
  border: 1px solid black;
  border-bottom: 0px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-40%);
  font-size: 110%;
  color: #000;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
    1px 1px 0 #fff;
  text-align: right;
  padding: 0em 1em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  clip-path: polygon(.5rem 0%, calc(100% - .5rem) 0%, 100% .5rem, 100% 100%, 0% 100%, 0% .5rem);
  background: linear-gradient(135deg, #000 .35rem, transparent .35rem),
    linear-gradient(45deg, transparent 94%, #000 94%),
    
    ;
  
  &.cpu-label {
    $diag-bg: #6a6a6a;
    $diag-bg-muted: #646464;
    background: polygon(.5rem 0%, calc(100% - .5rem) 0%, 100% .5rem, 100% 100%, 0% 100%, 0% .5rem);
  background: linear-gradient(135deg, #000 .35rem, transparent .35rem),
    linear-gradient(45deg, transparent 94%, #000 94%), linear-gradient(110deg, $diag-bg 2px, $diag-bg-muted 2px 3px, $diag-bg 3px 5px, $diag-bg-muted 5px 6px, $diag-bg 6px 8px, $diag-bg-muted 8px 9px, $diag-bg 9px 11px, $diag-bg-muted 11px 12px, $diag-bg 12px 14px, $diag-bg-muted 14px 15px, $diag-bg 15px 17px, $diag-bg-muted 17px 18px, $diag-bg 18px 20px, $diag-bg-muted 20px 21px, $diag-bg 21px 23px, $diag-bg-muted 23px 24px, $diag-bg 24px 26px, $diag-bg-muted 26px 27px, $diag-bg 27px 29px, $diag-bg-muted 29px 30px, $diag-bg 30px 32px, $diag-bg-muted 32px 33px, $diag-bg 33px 35px, $diag-bg-muted 35px 36px, $diag-bg 36px 38px, $diag-bg-muted 38px 39px, $diag-bg 39px 41px, $diag-bg-muted 41px 42px, $diag-bg 42px 44px, $diag-bg-muted 44px 45px, $diag-bg 45px 47px, $diag-bg-muted 47px 48px, $diag-bg 48px 50px, $diag-bg-muted 50px 51px, $diag-bg 51px 53px, $diag-bg-muted 53px 54px, $diag-bg 54px 56px, $diag-bg-muted 56px 57px, $diag-bg 57px 59px, $diag-bg-muted 59px 60px,  transparent 60px 100%),;
  }
  
  &.p1-label {
    $diag-bg: #c31f1e;
    $diag-bg-muted: #ab0408;
    background: polygon(.5rem 0%, calc(100% - .5rem) 0%, 100% .5rem, 100% 100%, 0% 100%, 0% .5rem);
  background: linear-gradient(135deg, #000 .35rem, transparent .35rem),
    linear-gradient(45deg, transparent 94%, #000 94%), linear-gradient(110deg, $diag-bg 2px, $diag-bg-muted 2px 3px, $diag-bg 3px 5px, $diag-bg-muted 5px 6px, $diag-bg 6px 8px, $diag-bg-muted 8px 9px, $diag-bg 9px 11px, $diag-bg-muted 11px 12px, $diag-bg 12px 14px, $diag-bg-muted 14px 15px, $diag-bg 15px 17px, $diag-bg-muted 17px 18px, $diag-bg 18px 20px, $diag-bg-muted 20px 21px, $diag-bg 21px 23px, $diag-bg-muted 23px 24px, $diag-bg 24px 26px, $diag-bg-muted 26px 27px, $diag-bg 27px 29px, $diag-bg-muted 29px 30px, $diag-bg 30px 32px, $diag-bg-muted 32px 33px, $diag-bg 33px 35px, $diag-bg-muted 35px 36px, $diag-bg 36px 38px, $diag-bg-muted 38px 39px, $diag-bg 39px 41px, $diag-bg-muted 41px 42px, $diag-bg 42px 44px, $diag-bg-muted 44px 45px, $diag-bg 45px 47px, $diag-bg-muted 47px 48px, $diag-bg 48px 50px, $diag-bg-muted 50px 51px, $diag-bg 51px 53px, $diag-bg-muted 53px 54px, $diag-bg 54px 56px, $diag-bg-muted 56px 57px, $diag-bg 57px 59px, $diag-bg-muted 59px 60px,  transparent 60px 100%),;
  }
}

.plus-minus {
  background: 
    linear-gradient(30deg, transparent 75%, #000 75%),
    linear-gradient(-30deg, #000 14%, transparent 14%),
    linear-gradient(0deg, #575757 43%, #000 43% 47%, #d6d6d6 47%)
    #d6d6d6;
  width: calc(100% + .5rem);
  margin-left: -.5rem;
  height: 85%;
  place-self: end;
  border-right: 4px solid #000;
  border-left: 2px solid #000;
  clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 100%);
  position: relative;
  
  &:before {
    content: '';
    display: block;
    background-image: url('https://s3.amazonaws.com/petergarrow.com/images/plus.png');
    position: absolute;
    height: 21px;
    width: 18px;
    top: 28px;
    left: 2px;
    background-size: cover;
  }
  
  &:after {
    content: '';
    display: block;
    background-image: url('https://s3.amazonaws.com/petergarrow.com/images/minus.png');
    position: absolute;
    height: 21px;
    width: 18px;
    top: 62px;
    left: 2px;
    background-size: cover;
  }
}

div.last-row {
  border: none;
  &:before {
    padding: 0;
    background: black;
  }
  &:after {
    display: block;
    content: '';
    background: black;
  }
  grid-column: 1 / 14;
  display: grid;
  grid-template-columns: 81.2px repeat(10, 1fr) 81.2px;
}