mnml/client/game.css

/* GAME */

.game {
    display: grid;
    grid-template-columns: repeat(3, 1fr));
    grid-template-columns: repeat(6, 1fr));

    grid-template-areas:
      "opponent opponent opponent"
      "opponent opponent opponent"
      "middle middle middle"
      "player player player";
      "player player player";
      "player player player";
}

.team {
    grid-area: player;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

.opponent {
    grid-area: opponent;
}

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

.target-svg {
    background: green;
    flex: 1;
}

.target-svg path {
    stroke: whitesmoke;
    stroke-width: 4px;
}


.game-cryp {
    display: grid;
    grid-template-areas:
        "stats"
        "effects"
        "avatar";

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

.player .game-cryp {
    grid-template-areas:
        "skills"
        "avatar"
        "effects"
        "stats";
}

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

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

.game-cryp .effects {
    font-size: 1.5em;
    grid-area: effects;
}

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

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

.game-cryp button {
    color: #888;
    flex: 1 1 100%;
    font-size: 16pt;
    padding: 0;
    margin: 0;
    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);
}

.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;
}

.img {
    position: relative;
}