// Welcome to the example CSS file for the template. CSS is a powerful styling tool that lets you customize the overall look and feel of your game. Dulst ships with DEFAULT CSS that forms the basis of every game, and every game can overwrite that default CSS with this file.





/*
 * Options. Here we define some variables for the colors in our game. These variables will be used further down in the CSS.
 */


// Basic Colors.
statBgColor = rgba(0, 0, 0, .5)
statTextColor = rgba(255, 255, 255, 1)
atkColor = rgba(221, 203, 0, 1)
healthColor = rgba(229, 80, 80, 1)
durColor = rgba(173, 173, 173, 1)
costColor = rgba(195, 223, 255, 1)
twistColor = rgba(255, 64, 235, 1)
powerColor = rgba(235, 224, 83, 1)
eligibilityColor = rgba(0, 255, 0, 1)
eligibilityHasteColor = rgba(255, 128, 0, 1)
summoningSicknessColor = rgba(30, 216, 83, 1)


// Class Colors. To add a new class, simply add another entry to the hash below. Multi-class cards will automatically be a mix of the classes.
classColors = {
  shell: hsl(10, 90, 50),
  claw: hsl(70, 90, 50),
  trample: hsl(160, 90, 50),
}

// Keywords. Keywords come from the secondary properties section of a card type. Check the admin/gameplay page to set them. If set on a card, they will show up in the card info preview.
keywords = hidden, vanguard, rush, "last life", legacy, frenzy, snipe, knocked-back, sacrifice, shield, overload, "warmed up", synergy, conjure, combatant, elusive, defense, poison, lifesteal, cannotAttack, spellPower, echo, immune, duration, silence, gemini, counter, field, armor, twist, remain, haste

// Numbered keywords show up similarly to the keywords above, but is special in that it has a number beside it. For example Duration (3) for cards that lasts 3 turn.
numberedKeywords = sacrifice, frenzy, shield, duration, spellPower, echo, counter, armor, defense, overload



// When selecting cards to toss away during a mulligan, display an x overlay on top of it. To replace that x image, simply replace the url here.
mulliganOverlay = url("https://d2t4fc8ff77neh.cloudfront.net/cardSrcMedia/1ablh1gc6_600px-red_x_svg.png")



// TRUE OR FALSE OPTIONS. Set any of these options to false to turn them off.


// Card Shapes
SHAPE_UNITS = true // if set to true, unit cards will be more rounded instead of rectangular.
SHAPE_EQUIPS = true // if set to true, equip cards will be circular instead of rectangular.
SHAPE_HERO = true // if set to true, hero cards will have rounded tops.


// Misc Options
MEDIACONTENT_INSET_SHADOWS = true // The main image (or video) of a card has inset shadows that make the image seem to sink deeper into the card.
HIDE_NEGATIVES = true // if set to true, stats which have a negative value will be shown as 0 instead of  its actual value.
OVERLAY_MAIN_PROPERTIES = true // if set to true, main properties such as cost, atk, and health will be overlay on top of the card image instead of forming a table underneath.
REQUIRE_TUTORIAL_COMPLETE = false // if set to true, other game modes will be hidden if tutorial isn't complete.


/*
 * Options END.
 */





/*
 * Shapes. Different cards when played in different locations change shape. Some cards become circles, others become pointy or squarish. Here are some definitions for those shapes.
 */

unitShape()
  if SHAPE_UNITS
    clip-path ellipse(50% 50% at 50% 50%)

weaponShape()
  if SHAPE_EQUIPS
    clip-path circle(42% at 50% 50%)

afterlifeShape()
  if SHAPE_UNITS
    clip-path circle(20% at 50% 50%)

/*
 * Shapes END.
 */





/*
 * Animations. Cards with special keywords may be animated. Here is the library of animations.
 */

@keyframes shieldThrob
  0%
    filter drop-shadow(0 -5px 5px #c6e000)
  100%
    filter drop-shadow(0 -5px 20px #c6e000)

@keyframes shieldEnter
  0%
    transform scale(0)
  100%
    transform scale(1)

@keyframes frenzy
  0%
    transform translate(0px, 0px) rotate(0deg)

  2%
    transform translate(1px, 2px) rotate(2.5deg)

  4%
    transform translate(8px, 3px) rotate(2.5deg)

  6%
    transform translate(-2px, 10px) rotate(-1.5deg)

  8%
    transform translate(3px, 5px) rotate(-0.5deg)

  10%
    transform translate(3px, -1px) rotate(-0.5deg)

  12%
    transform translate(-1px, 1px) rotate(-0.5deg)

  14%
    transform translate(10px, -7px) rotate(-0.5deg)

  16%
    transform translate(-3px, -5px) rotate(2.5deg)

  18%
    transform translate(1px, -1px) rotate(3.5deg)

  20%
    transform translate(-1px, -9px) rotate(-0.5deg)

  22%
    transform translate(-9px, 5px) rotate(-2.5deg)

  24%
    transform translate(-2px, -7px) rotate(1.5deg)

  26%
    transform translate(0px, 5px) rotate(0.5deg)

  28%
    transform translate(-2px, 10px) rotate(-1.5deg)

  30%
    transform translate(6px, -2px) rotate(3.5deg)

  32%
    transform translate(3px, 9px) rotate(-1.5deg)

  34%
    transform translate(-6px, -8px) rotate(3.5deg)

  36%
    transform translate(-6px, 1px) rotate(2.5deg)

  38%
    transform translate(6px, 0px) rotate(3.5deg)

  40%
    transform translate(0px, -8px) rotate(1.5deg)

  42%
    transform translate(2px, 1px) rotate(2.5deg)

  44%
    transform translate(-1px, -1px) rotate(3.5deg)

  46%
    transform translate(-4px, -3px) rotate(-2.5deg)

  48%
    transform translate(5px, -7px) rotate(0.5deg)

  50%
    transform translate(-7px, 4px) rotate(2.5deg)

  52%
    transform translate(-2px, 9px) rotate(-1.5deg)

  54%
    transform translate(4px, 1px) rotate(-1.5deg)

  56%
    transform translate(7px, 4px) rotate(2.5deg)

  58%
    transform translate(2px, 1px) rotate(1.5deg)

  60%
    transform translate(4px, -7px) rotate(1.5deg)

  62%
    transform translate(-8px, 9px) rotate(3.5deg)

  64%
    transform translate(2px, -1px) rotate(-2.5deg)

  66%
    transform translate(4px, -2px) rotate(2.5deg)

  68%
    transform translate(4px, 10px) rotate(2.5deg)

  70%
    transform translate(0px, -8px) rotate(2.5deg)

  72%
    transform translate(0px, 10px) rotate(0.5deg)

  74%
    transform translate(-2px, 6px) rotate(3.5deg)

  76%
    transform translate(-9px, -5px) rotate(0.5deg)

  78%
    transform translate(7px, 1px) rotate(3.5deg)

  80%
    transform translate(0px, 6px) rotate(-0.5deg)

  82%
    transform translate(4px, -6px) rotate(3.5deg)

  84%
    transform translate(-4px, 8px) rotate(-2.5deg)

  86%
    transform translate(1px, 10px) rotate(1.5deg)

  88%
    transform translate(-3px, 5px) rotate(-2.5deg)

  90%
    transform translate(0px, -3px) rotate(2.5deg)

  92%
    transform translate(1px, 8px) rotate(0.5deg)

  94%
    transform translate(-2px, 1px) rotate(-0.5deg)

  96%
    transform translate(5px, 6px) rotate(0.5deg)

  98%
    transform translate(1px, -8px) rotate(0.5deg)

@keyframes sonarBase
  from
    padding 0
    opacity 0.6
  to
    padding 1.3em
    opacity 0
    top -1.3em
    left -1.3em

@keyframes sonarStroke
  from
    border-width 0.4em
    margin -0.4em
  to
    border-width 0.1em


// Shadow Animations
@keyframes eligibilityHighlight
  from
    filter drop-shadow(0 -5px 14px eligibilityColor)
  to
    filter drop-shadow(0 -5px 16px eligibilityColor)

eligibilityAnimation = eligibilityHighlight .5s linear infinite alternate
// Haste
@keyframes eligibilityHasteHighlight
  from
    filter drop-shadow(0 -5px 14px eligibilityHasteColor)
  to
    filter drop-shadow(0 -5px 16px eligibilityHasteColor)

eligibilityHasteAnimation = eligibilityHasteHighlight .5s linear infinite alternate

// animation definition for the counter property.
@keyframes fadeInUpScale
  0%
    opacity 0
    transform scale(0.4) translateY(0)

  40%
    opacity 1
    transform scale(1) translateY(-14rem)

  100%
    opacity 1
    transform scale(1) translateY(-14rem)

@keyframes timerBar
  0%
    height 100vh
  100%
    height 0vh

summoningSickness()
  display block
  position absolute
  font-family sans-serif
  user-select none
  top 1rem
  right 1rem
  color summoningSicknessColor
  font-size 4rem
  opacity 0
  text-shadow #333 0px 0px 0.2rem, #333 0px 0px 0.2rem
  font-weight bold
  backface-visibility hidden
  transform-style preserve-3d
  animation summoningSickness linear 3s
  animation-iteration-count infinite

@keyframes summoningSickness
  0%
    transform: translate(0px,0px) scale(0.5)
    opacity: 0
    filter: blur(0px)
  25%
  75%
    opacity: 1
    filter: blur(0px)
  100%
    transform: translate(5rem,-5rem) scale(1.5)
    opacity: 0
    filter: blur(1rem)

@keyframes powerUseAnim
  0%
    box-shadow
      inset 0 0 50px rgba(255,255,255,0),
      inset 20px 0 80px rgba(255,0,255,0),
      inset -20px 0 80px rgba(0,255,255,0),
      inset 20px 0 300px rgba(255,0,255,0),
      inset -20px 0 300px rgba(0,255,255,0),
      0 0 30px rgba(255,255,255,0),
      -10px 0 50px rgba(255,0,255,0),
      10px 0 50px rgba(0,255,255,0);

  50%
    box-shadow
      inset 0 0 50px rgba(255,255,255,.4),
      inset 20px 0 80px rgba(255,0,255,.4),
      inset -20px 0 80px rgba(0,255,255,.4),
      inset 20px 0 300px rgba(255,0,255,.4),
      inset -20px 0 300px rgba(0,255,255,.4),
      0 0 30px rgba(255,255,255,.4),
      -10px 0 50px rgba(255,0,255,.4),
      10px 0 50px rgba(0,255,255,.4);
    color rgba(255,255,255,1)
    font-size 15rem
    text-indent -2.5rem

  100%
    box-shadow
      inset 0 0 50px rgba(255,255,255,0),
      inset 20px 0 80px rgba(255,0,255,0),
      inset -20px 0 80px rgba(0,255,255,0),
      inset 20px 0 300px rgba(255,0,255,0),
      inset -20px 0 300px rgba(0,255,255,0),
      0 0 30px rgba(255,255,255,0),
      -10px 0 50px rgba(255,0,255,0),
      10px 0 50px rgba(0,255,255,0);
    color: rgba(255,255,255,0);
    font-size: 20rem;
    text-indent: -4.5rem;

/*
 * Animations END.
 */





/*
 * Player Properties Styling.
 */

#opponent-overload[data-type=stat], #me-overload[data-type=stat]
  &[data-value="0"]
    display none
  .statWrapper
    width 100%
  .count
    box-sizing border-box
    text-align center
    width 100%
    &::before
      content "-"
      margin-right 3px

#me-maxMana, #opponent-maxMana
  justify-content flex-start
  .statWrapper
    width 100%
  .count
    box-sizing border-box
    text-align right
    width 100%
    border-top-left-radius 0
    border-bottom-left-radius 0
    margin-left -3px
    &::before
      content "/"
      margin-right 3px

#opponent-mana[data-type=stat], #me-mana[data-type=stat]
  .statWrapper
    width 100%
  .count
    box-sizing border-box
    padding-right 6px
    text-align right
    width 100%
    border-top-right-radius 0
    border-bottom-right-radius 0


#opponent-maxMana[data-type=stat], #me-maxMana[data-type=stat]
  .statWrapper
    width 100%
  .count
    text-align left
    width 100%
    border-top-left-radius 0
    border-bottom-left-radius 0

/*
 * Player Properties Styling END.
 */





/*
 * Card Full Info Popup Styling. The default card popups do not have the card stats displayed on top of the card image. Because different games may have different stats and would likely want to use them in different ways, the default stats are arranged in a table underneath. Here for the template we can save space on the card by putting the stats on top of the card image.
 */

statStyles()
  border-radius 50em
  background statBgColor
  color statTextColor
  padding .2em .4em
  position absolute
  font-size 1.4em
  font-weight bold
  line-height 1
  width inherit

setNegativesToZero()
  if HIDE_NEGATIVES
    // ensure that all negative values are displayed as 0.
    &[data-value^="-"]
      .data
        color transparent
        position absolute
      &:before
        content "0"
        display inline-block

#cardFullInfo .cardDisplayInner
.cardFullInfo .cardDisplayInner
  color #eee

  .image, .video
    position relative
    border-bottom 2px solid #000
    if MEDIACONTENT_INSET_SHADOWS
      &:after
        box-shadow inset 0 0 30px 15px alpha(#000, 0.8)
        content ''
        display block
        height 100%
        position absolute
        top 0
        width 100%

  .info
    position relative

  ul.dataPane
    if OVERLAY_MAIN_PROPERTIES
      li
        .data
          width auto
      .mainProperties
        width auto
        .table
          display block
          border-spacing 0
          .Row .td
            display block
            padding 0
        .title
          display none

        .property
          statStyles()
          font-size 3em
          setNegativesToZero()

        [data-name='cost']
          top 10px
          left 10px
          border 3px solid costColor
        [data-name='atk']
          top 294px
          left 10px
          border 3px solid atkColor
        [data-name='health']
          top 294px
          right 10px
          border 3px solid healthColor
        [data-name='dur']
          top 294px
          right 10px
          border 3px solid durColor
        [data-name='reqSource'], [data-name='source']
          font-size 1em
          font-weight 400
          background none
          bottom 12px
          left 24px
          text-transform capitalize
          padding-left 0
          padding-right 0

    li.effect, li.rarity, li.description, li.desc, li.type
      .data
        float none
        width auto
      .title
        display none
      text-align center
    .secondaryProperties
      overflow hidden
      padding 0 19.5px
      background rgba(0,0,0,.4)
      margin 0
      box-sizing border-box
      text-align center

      // there are some properties that are for internal or UI purposes only, not meant to be displayed.
      li
        &[data-name="eligibleToAttack"]
          display none

      li
        display inline-block
        background none
        padding 9.75px 0
        overflow visible
        margin 0 0 1px
        .data, .title
          -webkit-font-smoothing auto
          display inline
          width auto
          float none
          padding-right 0
        &[data-value="0"]
          display none
        &[data-name="legacy"], &[data-name="invoke"], &[data-name="defensive"], &[data-name="offensive"]
          display none
        for keyword in keywords
          &[data-name=\"{keyword}\"]
            text-transform capitalize
            color white
            font inherit
            font-weight bold
            &::after
              content ". "
              display inline
              padding-right .25em
            .title
              text-transform capitalize
              color white
              font inherit
              font-weight bold
            .data
              display none
        for keyword in numberedKeywords
          &[data-name=\"{keyword}\"]
            .title
              padding-right 0
            &::after
              content " (" attr(data-value) "). "
              display inline
              padding-right .25em


        // if the value is 1 then don't show the data as usual. Only show data if value is more than 1.
        &[data-name="frenzy"], &[data-name="shield"], &[data-name="echo"]
          &[data-value="1"]
            &::after
              content ". "
              display inline
              padding-right .25em

        // "silence" keyword is shown as "silenced" in keyword list
        &[data-name="silence"]
          &::after
            content "d. "
            display inline
            padding-right .25em

    li.rarity
      text-align right

// Don't show the keywords help for the reqSource and source properties. The helptext for these properties are only for developers and not players.
.keywords-help
  .keyword[data-name="source"]
  .keyword[data-name="reqSource"]
    display none

// Class Styling. Cards of different classes will have different color border and texts.
classStyles(c)
  .name, .dataPane
    color c
  .name
    border-top 3px solid c
  .image, .video
    border-bottom 2px solid c
    &:after
      box-shadow inset 0 0 30px 15px darken(alpha(c, 0.8), 80%)

#cardFullInfo, .cardFullInfo
  for key, value in classColors
    .mainProperties
      .data
        [data-name=\"{key}\"]
          color value !important

    &[data-source=\"{key}\"], &[data-reqsource=\"{key}\"]
      classStyles(value)
      [data-name='source']
      [data-name='reqSource']
        .data
          color value !important

    for key2, value2 in classColors
      unless key == key2
        &[data-source*=\"{key}\"][data-source*=\"{key2}\"], &[data-reqsource*=\"{key}\"][data-reqsource*=\"{key2}\"]
          classStyles(mix(value, value2))

/*
 * Card Full Info Popup Styling END.
 */





/*
 * Select Cards Modal Styling.
 */

.select-cards-container
  .cards
    if OVERLAY_MAIN_PROPERTIES
      .card
        .mainProperty
          statStyles()
          font-size 3em
          display block
          setNegativesToZero()
        [data-name='cost']
          top 10px
          left 10px
          border 3px solid costColor
        [data-name='atk']
          top 294px
          left 10px
          border 3px solid atkColor
        [data-name='health']
          top 294px
          right 10px
          border 3px solid healthColor
        [data-name='dur']
          top 294px
          right 10px
          border 3px solid durColor
        [data-name='reqSource']
          display none

  // when selecting mulligans
  &[data-effectname="mulliganB"]
  &[data-effectname="mulliganA"]
    .select-cards-inner
      .card
        &:not(.selected)
          box-shadow 0 0 30px 7px rgba(81, 255, 0, .7)
        &.selected
          box-shadow none
          &::after
            position absolute
            height 92%
            width 92%
            top 4%
            left 4%
            background center center no-repeat
            background-size contain
            background-image mulliganOverlay
            content " / "
            display block
            color transparent

/*
 * Select Cards Modal Styling END.
 */





/*
 * Play Interface.
 */

#playContainer
  .card
    box-shadow none

    .property
      setNegativesToZero()

      &[data-name="cost"]
      &[data-name="atk"]
      &[data-name="health"]
      &[data-name="armor"]
        display block
        z-index 1

      &[data-name="cost"]
        statStyles()
        top .5rem
        left .5rem
        border 1px solid costColor

      &[data-name="atk"]
        statStyles()
        bottom .5rem
        left .5rem
        border 1px solid atkColor

      &[data-name="health"]
        statStyles()
        bottom .5rem
        right .5rem
        border 1px solid healthColor

      &[data-name="dur"]
        statStyles()
        bottom .5rem
        right .5rem
        border 1px solid durColor

      &[data-name="armor"]
        statStyles()
        padding 0.35em 0.35em 0.45em 0.35em
        width inherit
        line-height 1.4em
        bottom 5rem
        right 0rem
        filter drop-shadow(0 -5px 15px #919191)
        background transparent
        width 1.4em
        background-image url(https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ck5p2pv3_greyblueshield.png)
        background-size contain
        background-position center center
        background-repeat no-repeat
        opacity 0.9


    &[data-powerusedthisturn="0"]
      .property[data-name="powerName"]
        position absolute
        top 0
        height 100%
        width 100%
        display block
        border-top-left-radius 20em 30em
        border-top-right-radius 20em 30em
        overflow hidden
        color rgba(0, 0, 0, 0)
        font-size 1.4em
        display none
        &::after
          content attr(data-value)
          display block
          top 5rem
          width 100%
          text-align center
          padding .25rem 0
          color powerColor
          text-shadow black 0px 0px 5px, black 0px 0px 2px
          pointer-events none
          background-color statBgColor
          position absolute

    &.powerUseAnimation::after
      display block
      content ""
      color rgba(255,255,255,0)
      width 100%
      height 100%
      animation powerUseAnim 1200ms cubic-bezier(0.39, 0.575, 0.565, 1)
      position absolute
      border-top-left-radius 20em 30em
      border-top-right-radius 20em 30em
      top 0
      left 0
      right 0
      bottom 0

    &[data-location="me-hero"]
    &[data-location="opponent-hero"]
      img
        if SHAPE_HERO
          border-top-left-radius 20em 30em
          border-top-right-radius 20em 30em
        border 2px solid grey

      .property
        &[data-name="health"]
          display block
        &[data-name="atk"]
          display block



    &[data-location="me-hand"]
    &[data-location="opponent-hand"]
      .property[data-name="atk"]
      .property[data-name="health"]
        display none
      &[data-echoCopy="1"]
        .property[data-name="echoCopy"]
          background rgba(0,115,255,.15)
          position absolute
          left 0
          top 0
          display block
          width 100%
          height 100%
          color rgba(0, 0, 0, 0)
          border-radius 5px

    &[data-location="me-afterlife"]
    &[data-location="opponent-afterlife"]
      .media-content
        afterlifeShape()
      transition 1s all
      .property
        display  none

    &[data-location="me-playPreview"]
    &[data-location="opponent-playPreview"]
      opacity 1
      transition 1s all
      .media-content
        border-radius 5px
      .property[data-name="cost"]
        border-radius 2em
        background statBgColor
        padding .2em .4em
        position absolute
        font-size 1.5em
        font-weight bold
        top 5px
        left 5px
        line-height 1
        border 1px solid costColor

    &[data-location="me-weapon"]
    &[data-location="opponent-weapon"]
      .media-content
        weaponShape()
      .property
        &[data-name="cost"]
          display none
        &[data-name="dur"]
          display block

    &[data-location="me-backrow"]
    &[data-location="opponent-backrow"]
      .media-content
        weaponShape() // Remains use same shape as weapons
      .property[data-name="cost"]
        display none
      &[data-position="facedown"]
        &::after
          content "?"
          font-weight bold
          font-size 4rem
          display block
          position absolute
          line-height 7rem
          width 100%
          height 7rem
          color alpha(twistColor, 30%)
          top 1rem
          left 0
        &::before
          content "."
          display block
          height 100%
          width 100%
          weaponShape() // Twists use same shape as weapons
          background alpha(twistColor, 20%)
          box-shadow inset 1rem 0 1rem 1rem alpha(twistColor, 5%), inset -1rem 0 1rem 1rem alpha(twistColor, 5%), inset 0 2rem 1rem 1rem alpha(twistColor, 5%), inset 0 -2rem 1rem 1rem alpha(twistColor, 5%), inset 0.7rem 1.3rem 1.6rem 1.4rem alpha(twistColor, 5%), inset -0.7rem 1.3rem 1.6rem 1.4rem alpha(twistColor, 5%), inset -0.7rem -1.3rem 1.6rem 1.4rem alpha(twistColor, 5%), inset 0.7rem -1.3rem 1.6rem 1.4rem alpha(twistColor, 5%)
        &:hover
          &::after
            content "Twist"
            color alpha(twistColor, 60%)
            font-weight 400
            font-size 2rem
        .property
          display none

        .media-content
          display none

    &[data-location="me-board"]
    &[data-location="opponent-board"]
    &[data-location="me-board1"]
    &[data-location="opponent-board1"]
    &[data-location="me-board2"]
    &[data-location="opponent-board2"]
    &[data-location="me-board3"]
    &[data-location="opponent-board3"]
      .media-content
        unitShape()

      .property[data-name="cost"]
        display none

      keywordVisualEffectsBasic()
        position absolute
        display block
        color rgba(0, 0, 0, 0)

      &[data-summoningSickness="1"]:not([data-eligibletoattack="1"]):not([data-rush="1"],[data-haste="1"])
        .property[data-name="summoningSickness"]
          keywordVisualEffectsBasic()
          top 0
          left 0
          width 100%
          height 10rem
          .data
            &:after
              summoningSickness()
              content "z"
              animation-delay 0s
          &:before
            summoningSickness()
            content "z"
            animation-delay 1s
          &:after
            summoningSickness()
            content "z"
            animation-delay 2s


      &[data-last-life="1"]
        .property[data-name="last life"]
          keywordVisualEffectsBasic()
          background rgba(255,255,255,.01)
          box-shadow inset 0 10px 20px 10px #FFF, inset 0 -10px 20px 10px #FFF, 0 10px 20px 10px #FFF, 0 -10px 20px 10px #FFF
          transform scaleX(.65) scaleY(.2)
          border-radius 100px
          left 0
          top -40%
          height 0
          width 100%
          padding-bottom 100%

      &[data-frenzy="1"]
      &[data-frenzy="2"]
      &[data-frenzy="3"]
      &[data-frenzy="4"]
        &[data-eligibletoattack="1"]
          .card-inner
            animation frenzy 2s infinite alternate ease-out

      &[data-shield="1"]
        .property[data-name="shield"]
          keywordVisualEffectsBasic()
          animation shieldEnter 1s cubic-bezier(.55,0,.1,1), shieldThrob .5s alternate infinite;
          z-index 1
          filter drop-shadow(0 -5px 15px #c6e000)
          background transparent
          left 10%
          top -20%
          width 80%
          height 80%
          background-image url("https://d2t4fc8ff77neh.cloudfront.net/cardSrcMedia/1abmn8gl0_9TpjLAETE.svg")
          background-size contain
          background-position center center
          background-repeat no-repeat
          opacity .5

      &[data-snipe="1"]
        .property[data-name="snipe"]
          keywordVisualEffectsBasic()
          z-index 1
          filter drop-shadow(0 0px 2px red)
          background transparent
          left 20%
          bottom -15%
          width 60%
          height 30%
          background-image url("https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1bflo5jja_svg-20-512.png")
          background-size contain
          background-position center center
          background-repeat no-repeat

      &[data-poison="1"]
        .property[data-name="poison"]
          keywordVisualEffectsBasic()
          z-index 1
          filter drop-shadow(0 0px 2px #008000) invert(120%) sepia() saturate(100000%) hue-rotate(40deg)
          background transparent
          left 20%
          bottom -12%
          width 60%
          height 25%
          background-image url("https://d2t4fc8ff77neh.cloudfront.net/cardSrcMedia/1ccea1ktv_noun_1581462_cc.png")
          background-size contain
          background-position center center
          background-repeat no-repeat

      &[data-hidden="1"]
        .property[data-name="hidden"]
          keywordVisualEffectsBasic()
          box-shadow inset 20px 0 10px 0 rgba(0,0,0,0.2048), inset 40px 0 14px -4px rgba(0,0,0,0.256), inset 60px 0 18px -8px rgba(0,0,0,0.32), inset 80px 0 22px -12px rgba(0,0,0,0.4), inset 100px 0 26px -16px rgba(0,0,0,0.5)
          left 0
          top 0
          width 100%
          height 100%
          border-radius 5px
          unitShape()

      &[data-elusive="1"]
        .property[data-name="elusive"]
          background rgba(255,215,0,.15)
          keywordVisualEffectsBasic()
          left 0
          top 0
          width 100%
          height 100%
          border-radius 5px
          unitShape()

      &[data-immune="1"]
        .property[data-name="immune"]
          keywordVisualEffectsBasic()
          background rgba(55,155,255,.25)
          left 0
          top 0
          width 100%
          height 100%
          border-radius 5px
          unitShape()

    &[data-location="me-hero"]
      &[data-eligibletoattack="1"]
        .media-content
          animation eligibilityAnimation
      &[data-cannotAttack="1"]
        transform rotate(90deg)

    &[data-location="opponent-hero"]
      &[data-cannotAttack="1"]
        transform rotate(270deg)

    &[data-location="me-board"]
      &[data-eligibletoattack="1"]
        animation eligibilityAnimation
        &[data-haste="1"]
          &[data-summoningSickness="1"]
            animation eligibilityHasteAnimation
      &[data-cannotAttack="1"]
        transform rotate(90deg)
      &[data-vanguard="1"]
        margin-top -2em
      &[data-knocked-back="1"]
        transform rotate(90deg)
        transition 1s
    &[data-location="opponent-board"]
      &[data-cannotAttack="1"]
        transform rotate(270deg)
      &[data-vanguard="1"]
        margin-top 2em
      &[data-knocked-back="1"]
        transition 1s
        transform rotate(270deg)

    // these are two locations that aren't defined in the game logic, just a place to send cards to when you don't want to see them anymore.
    &[data-location="opponent-hidden"]
    &[data-location="me-hidden"]
      opacity 0


// only show eligibleToPlay highlights for that turn's player.
body[data-turnPlayer="player1"][data-playerNumber="player1"]
body[data-turnPlayer="player2"][data-playerNumber="player2"]
  .card
    &[data-location="me-hand"]
      &[data-eligibleToPlay="1"]
        perspective 400px
        transform-style preserve-3d
        will-change transform
        .card-inner
          display block
          transform-style preserve-3d
          width 100%
          will-change transform
          .media-content
            animation eligibilityAnimation

        &:hover
          margin-top -1%





// Custom UI Elements created by rule cards.
#card-container
  .card[data-title="ui element: board overlay"]
    position absolute
    transition none
    width 102rem !important
    height 17rem !important
    z-index 100 !important
    pointer-events none
    top 52rem !important
    left 21rem !important
    border solid 3px rgb(56, 205, 255)
    border-radius 3rem
    background alpha(rgb(56, 205, 255), .2)

  .card[data-title="ui element: sonar"]
    position relative
    width 3rem !important
    height 3rem !important
    pointer-events none
    transition none
    &:after
      z-index -1
      padding 0
      top 0
      left 0
      width 100%
      height 100%
      content ''
      display block
      position absolute
      animation-name sonarBase, sonarStroke
      animation-iteration-count infinite
      animation-duration 1s
      box-sizing content-box
      border 1px solid rgba(255, 69, 0, 1)
      border-radius 10rem

  .card[data-dulstClass~="dialogue"]
    height auto !important
    z-index 2000 !important
    .card-inner
      .media-content
        display none
      border-radius 2rem
      border .4rem solid #aaa
      border-radius 2rem
      background alpha(#333, .6)
      color #fff
      box-sizing border-box
      text-shadow 1px 1px #444
      box-shadow 0 0 1px rgba(76,86,103,1), 0 1px 1px rgba(31,37,50,1)
      .property[data-name="text"]
        display block
    &::after
      content: " ";
      position: absolute;
      border-style: solid;
    &[data-dulstclass~="bottom"]
      &::after
        bottom 100% /* At the top of the tooltip */
        border-color transparent transparent #b1b1b1 transparent
    &[data-dulstclass~="top"]
      &::after
        top 100% /* At the bottom of the tooltip */
        border-color #b1b1b1 transparent transparent transparent

  .card[data-title="ui element: Tutorial Dialog"]
    width 48rem !important
    .card-inner
      margin-top 2.5rem
      padding 1.5rem 2rem
      font-size 2.5rem
      &::after
        left 18rem
        margin-left 3rem
        border-width 3rem

  .card[data-title="ui element: paragraph text"]
    width 100vw !important
    height 100vh !important
    top 0 !important
    left 0 !important
    right 0 !important
    z-index 2000 !important
    position fixed
    border 0
    background linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,0) 70%)
    .card-inner
      padding 12vh 20vw
      font-size 5vh
      box-shadow none
      text-shadow 1px 1px 0px #444, -1px 1px 0px #444, 1px -1px 0px #444, -1px -1px 0px #444
      background 0
      border 0
      border-radius 0
      &::after
        content "(click to continue)"
        display block
        font-style italic
        margin-top 1rem
        font-size 65%

  .card[data-title="ui element: help tooltip"]
    width 30rem !important
    transition none
    .card-inner
      // margin-top 2.5rem
      padding 1rem 1.25rem
      font-size 2rem
    &::after
      margin-left: 2rem;
      border-width: 1rem;
      left 12rem
    &[data-dulstClass~="reqClick"]
      cursor pointer
      .card-inner
        &:after
          content "(click to continue)"
          display block
          font-style italic
          margin-top .5rem
        &:hover
          box-shadow 0 0 5px alpha(gold, 1)

  .card[data-title="ui element: timerBar"]
    width 1rem !important
    position fixed !important
    left 0 !important
    height 100vh !important
    bottom 0 !important
    top auto !important
    background red
    animation-name timerBar
    animation-iteration-count 1
    animation-duration 10s
    animation-timing-function linear
    &[data-location="opponent-playPreview"]
      opacity .3


// Floating text. When main stats change on a card a popup appears.
.card-change-value-container
  font-size 3rem
  font-weight bold

  // by default don't show floating text when stats change.
  .card-change-value
    display none

  // Do show floating text when health changes. This is floating damage.
  .health.decrease
    &.me-board
    &.opponent-board
    &.hero
      display block
    color white
    border 1px solid healthColor
    background alpha(healthColor, 75%)
    padding 2rem
    label, .to
      display none
    .by
      display block
    .arrow
      display none

  // show floating numbers when the counter changes.
  .card-change-value.counter.increase
    display block
    color white
    opacity 0
    animation fadeInUpScale 1.5s
    animation-timing-function ease-in-out
    animation-iteration-count 2
    animation-direction alternate
    animation-fill-mode backwards
    font-size 18rem
    background transparent
    border 0
    label, .by
      display none
    .to
      display block
    .arrow
      display none

/*
 * Play Interface End.
 */





/*
 * Out of Game Interface.
 */


// Control the positioning of the game modes screen when the player is deciding which game mode to play after hitting the play a match button.
.game-modes-selector
  width 60vh
  max-height 450px



body:not([achievement-tutorial_win="1"])
  if REQUIRE_TUTORIAL_COMPLETE
    .game-modes-selector
      overflow-y hidden
      max-height 350px
      max-width 600px
      padding 0

      .grid
        display flex
        flex-direction column
        justify-content center
      .game-mode:not([data-id="tutorial"])
        display none
      .game-mode[data-id="tutorial"]
        height 200px
        padding 50px
        padding-bottom 100px
        margin-bottom 0
        .game-mode-inner
          height 100%
          width 100%
          .gradient
            padding 0
            text-align center
            display flex
            justify-content center
            flex-direction column
            .title
              position static
              display block
              font-size 3em

        .description
          padding 1em
          max-width 500px
          margin 0 auto
          display block

  // .grid
  //   grid-template-columns \[col\] auto \[col\] auto \[col\] auto \[col\] auto \[col\] auto \[col\] auto \[col\] auto \[col\] auto \[col\] auto
  //   grid-template-rows \[row\] 4fr \[row\] 2fr
  //   display grid
  //   grid-gap 10px

  // .box
  //   margin-bottom none
  //   height auto

/*
 * Out of Game Interface End.
 */