mnml/client/assets/styles/game.css

/* GAME */

.game {
    display: grid;
    grid-template-rows: min-content min-content 1fr 1.5fr;
    grid-template-areas:
        "ready"
        "timer"
        "opponent"
        "player";
}

.team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: minmax(0, 1fr);

    /* stops overflow */
    min-height: 0;
    min-width: 0;
}

.player {
    grid-area: player;
}

.opponent {
    grid-area: opponent;
    transform: perspective(23rem);
}

.opponent .combat-text {
    left: 40%;
    transform: translate(-50%, -50%);
}


.opponent .game-cryp {
    align-items: flex-start;
    grid-template-rows: min-content min-content min-content 2fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "stats  stats"
        "name   ."
        "effects ."
        "avatar target";
}

.opponent .game-cryp .name {
    margin-bottom: 0;
    margin-top: 0.25em;
}

.game-cryp {
    display: grid;

    /*justify-items: center;*/
    justify-items: start;
    /*align-items: flex-end;*/

    grid-template-rows: 1fr 2fr 1fr min-content;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "skills     ."
        "avatar     target"
        "effects    ."
        "name       ."
        "stats      stats ";

    transition-property: all;
    transition-duration: 0.25s;
    transition-delay: 0;
    transition-timing-function: ease;
}

.game-cryp .targeting {
    grid-area: target;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    white-space: nowrap;
}

.game-cryp .img {
    grid-area: avatar;
}

.game-cryp .name {
    width: 100%;
    margin-bottom: 0.25em;
    text-align: center;
    grid-area: name;
}

.game-cryp .stats {
    grid-area: stats;
    display: flex;
    flex-flow: row;
}

.game-cryp figure {
    padding: 0 0.5em;
    display: flex;
    flex-flow: column;
}

.game-cryp figcaption {
    white-space: nowrap;
    font-size: 100%;
}

@media (max-width: 1500px) {
    .game {
        font-size: 12pt;
    }

    .game-cryp figure {
        padding: 0 0.25em;
    }

/*    .game .stat-icon {
        height: 1.5em;
        stroke-width: 3px;
    }
*/}

.game-cryp .skills {
    grid-area: skills;
    display: flex;
    flex-flow: column-reverse;
    justify-self: center;
}

/*@media (max-width: 1000px) {
    .game-cryp .skills {
        flex-flow: column;
    }
}
*/

.game-cryp .effects {
    grid-area: effects;
    font-size: 1.5em;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

.game-btn {
    flex: 0 0 25%;
}

.game-btn:first-child {
    margin-right: 0.5em;
}

.game-cryp button {
    color: #888;
    flex: 1 1 100%;
    padding: 0;
    margin: 0 0.5em;
    border-width: 0px;
}

.game-cryp button.active {
    color: whitesmoke;
}

.game-cryp button[disabled], .game-cryp button[disabled]:hover {
    color: #333333;
    font-size: 14pt;
    text-decoration: line-through
}

.game-cryp button:hover {
    color: whitesmoke;
}

.game-cryp.ko {
    animation: none;
    opacity: 0.5;
    opacity: 0.35;
    filter: grayscale(100%);
}

.game-cryp.ko button:hover {
    color: #333;
}

.game-cryp.unfocus {
    opacity: 0.65;
    filter: blur(5px);
}

.game-cryp.unfocus.ko {
    filter: blur(5px) grayscale(100%);
}

.combat-text {
    fill: whitesmoke;
    font-size: 2em;
    font-family: 'Jura';
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
}

CRYP DAMAGE

.game-cryp.active-skill {
    filter: drop-shadow(0 0 0.2em silver);
    /*border-color: silver;*/
}

.game-cryp.red-damage {
    filter: drop-shadow(0 0 0.2em red);
    color: red;
    /*border-color: red;*/
}

.red-damage button {
    /*border: 1px solid red;*/
    color: red;
}

.red-damage text {
    fill: red;
}

.red-damage .stats {
    /*border-top: 1px solid red;*/
}

.game-cryp.blue-damage {
    filter: drop-shadow(0 0 0.2em blue);
    color: blue;
    /*border-color: blue;*/
}

.blue-damage button {
    /*border: 1px solid blue;*/
    color: blue;
}

.blue-damage text {
    fill: blue;
}

.blue-damage .stats {
    /*border-top: 1px solid blue;*/
}

.game-cryp.green-damage {
    filter: drop-shadow(0 0 0.2em green);
    color: green;
    /*border-color: green;*/
}

.green-damage button {
    /*border: 1px solid green;*/
    color: green;
}

.green-damage text {
    fill: green;
}

.green-damage .stats {
    /*border-top: 1px solid green;*/
}

.game-cryp.purple-damage {
    filter: drop-shadow(0 0 0.2em purple);
    color: purple;
    border-color: purple;
}

.purple-damage button {
    border: 1px solid purple;
    color: purple;
}

.purple-damage text {
    fill: purple;
}

.purple-damage .stats {
    border-top: 1px solid purple;
}

.game .img {
    position: relative;
    height: 100%;
    min-width: 200px;
    /*animation: rotate 1s infinite ease-in-out alternate;*/
}

/*@keyframes rotate {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(50deg);
    }
}
*/
.resolving .skills button {
    display: none;
}


/*
    COMBAT ANIMATIONS
*/

/* ----------------------------------------------
 * Generated by Animista on 2019-5-21 11:38:30
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

.attack-cast {
    -webkit-animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes attack-cast {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-5em);
            transform: translateY(-5em);
    opacity: 0;
  }
}
@keyframes attack-cast {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-5em);
            transform: translateY(-5em);
    opacity: 0;
  }
}

.attack-hit {
    -webkit-animation: attack-hit 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: attack-hit 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes attack-hit {
  0% {
    -webkit-transform: translateY(-1000px) translateX(1000px);
            transform: translateY(-1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes attack-hit {
  0% {
    -webkit-transform: translateY(-1000px) translateX(1000px);
            transform: translateY(-1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
    opacity: 1;
  }
}