mnml/client/assets/styles/game.less

@import 'colours.less';
/* GAME */

.game {
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr 0.5fr 1.5fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "opponent"
        "target  "
        "player  ";
}

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

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

.player {
    grid-area: player;
    z-index: 5;
}

.opponent {
    grid-area: opponent;
}

.opponent .combat-text {
    top: 75%;
}

.opponent .combat-anim {
    top: 25%;
}

.opponent .game-construct {
    align-items: flex-start;
    grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
    grid-template-columns: 1fr;
    grid-template-areas:
        "stats  "
        "name   "
        "effects "
        "avatar ";
}

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

.game-construct {
    display: grid;

    /*IMPORTANT*/
    /* ensures combat text doesn't fly off back to the body
       searching for a positioned element because everything is in the grid
    */
    position: relative;

    justify-items: center;

    grid-template-rows: min-content minmax(min-content, 1fr) min-content min-content min-content;
    grid-template-columns: 1fr;
    grid-template-areas:
        "skills     "
        "avatar     "
        "effects    "
        "name       "
        "stats      ";

    transition-property: translate, opacity;
    transition-duration: 0.25s;
    transition-delay: 0;
    transition-timing-function: ease;
}

#targeting {
    grid-area: target;
    height: 100%;
    width: 100%;
    stroke-width: 2px;
    stroke: whitesmoke;
}

/* some stupid bug in chrome makes it fill the entire screen */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #targeting {
        max-height: 10em;
    }
}
/*
.resolving #targeting {
    opacity: 0;
}
*/
.game-construct .name {
    width: 100%;
    margin-bottom: 0.25em;
    text-align: center;
    grid-area: name;
}

.game-construct .stats {
    grid-area: stats;
    display: flex;
    justify-content: center;
    text-align: center;
}

.game-construct .stats div {
    padding: 0 0.5em;
    display: flex;
    flex-flow: column;
    white-space: nowrap;
    text-align: center;
}

.game-construct .stats .value {
    display: none;
}

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

@media (max-width: 1500px) {
    .game-construct figure {
        padding: 0 0.25em;
    }
}

.game-construct .skills {
    grid-area: skills;
    display: flex;
    flex-flow: column-reverse;
    justify-self: center;
    width: 100%;
}

.game-construct .skills button {
    width: 100%;
}

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

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

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

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

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

.game-construct button[disabled], .game-construct button[disabled]:hover {
    color: #333333;
    text-decoration: line-through
}

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

.game-construct.ko {
    animation: none;
    opacity: 0.20;
/*    filter: grayscale(100%);
*/}

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

.game-construct.unfocus {
    opacity: 0.35;
/*    filter: blur(5px);
*/}

.game-construct.unfocus.ko {
    opacity: 0.20;
/*    filter: blur(5px) grayscale(100%);
*/}

.combat-text {
    font-size: 2em;
    font-family: 'Jura';
    position: absolute;
    top: 5%;
}

.combat-text svg {
    height: 7em;
    max-width: 100%;
}

.combat-anim {
    font-size: 2em;
    font-family: 'Jura';
    position: absolute;
    object-fit: contain;
    top: 15%;
    max-width: 100%;
}

.combat-anim svg {
    height: 7em;
    width: 100%;
}

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

.game-construct.red-damage {
    color: #a52a2a;
    /*ensure construct doesn't get opacity lowered because of being KO before the KO animation*/
    opacity: 1;
}

.red-damage button {
    color: #a52a2a;
}

.red-damage text {
    fill: #a52a2a;
}

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

.game-construct.blue-damage {
    color: #3050f8;
    opacity: 1;
}

.blue-damage button {
    color: #3050f8;
}

.blue-damage text {
    fill: #3050f8;
}

.blue-damage .stats {
}

.game-construct.green-damage {
    color: #1FF01F;
    opacity: 1;
}

.green-damage button {
    color: #1FF01F;
}

.green-damage text {
    fill: #1FF01F;
}

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

.game-construct.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, .faceoff .img {
    position: relative;
    height: 100%;
}

.game .avatar, .faceoff .avatar {
    grid-area: avatar;
    width: 100%;
    height: 100%;

    grid-area: avatar;
    object-fit: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.resolving .skills button {
    opacity: 0;
}

.skill-animation {
    opacity: 0;
    stroke-width: 5px;
    height: 5em;
}

@media (max-width: 1000px) {
    .game {
        grid-template-areas:
            "opponent"
            "target  "
            "player  ";

        grid-template-rows: 1fr 0.2fr 1.5fr;
        grid-template-columns: 1fr;
    }

    .game .stats div {
        padding: 0;
    }

    .game .stats .max {
        display: none;
    }

    .game .stats .value {
        display: flex;
    }

    .game .stats svg {
        height: 1em;
    }

    .game .stats div {
        margin: 0 0.2em;
    }

    .game .effects {
        font-size: 100%;
    }

    #mnml .game .skills button, #mnml .game .stats {
        font-size: 75%;
    }

    .game-construct .name {
        display: none;
    }
}