
@media (max-aspect-ratio: 1.1/1) {
    #devil, #angel{
        top:initial;
        bottom: 3vmin;
        transition: bottom 3s;
    }

    .hide #devil, .hide #angel{
        top:initial;
        bottom: -50vmin;
    }

    #footer{
        /* top: 50%; */
        bottom: 26vmin;
        /* transform: translateY(50%); */
    }

    .hide #footer{
        bottom: 23vmin;
        left:-50vmin;
    }

    .game>span>b{
        font-weight:normal;
        font-size: 50%;
        position: absolute;
        right: 100%;
        white-space:nowrap;
        padding-right: calc(0.25*var(--font-size));
        top: 16%;
    }
    .game b b:after{
        content:"♠";
        font-family: ui-sans-serif;
    }
    .game>span>i{
        font-style:normal;
        font-size: 50%;
        position: absolute;
        left: 100%;
        padding-left: calc(0.25*var(--font-size));
        white-space:nowrap;
        top: 20%;
    }
    .game i i:after{
        /*content:"♥";*/
        content:"✔";
    }
}

@media (min-aspect-ratio: 1.1/1){
    .game>span>b{
        font-weight:normal;
        font-size: 70%;
        margin-left: 4pt;
        position: absolute;
        right: 100%;
        width: 100%;
        /* height: 15pt; */
        padding-right: calc(0.5*var(--font-size));
    }
    .game b b{
        background: url(img/devil.svg) right center no-repeat;
        width: var(--font-size);
        height: var(--font-size);
        float: right;
        background-size:contain;
        /* text-align: right; */
    }
    .game>span>i{
        font-style:normal;
        /* opacity: 0.25; */
        position: absolute;
        left: 100%;
        padding-left: calc(0.5*var(--font-size));
        width: 100%;
        /* height: 15pt; */
        text-align: left;
        font-size: 80%;
    }
    /*.game i i{
        background: url(img/angel.svg) center no-repeat;
        width: var(--font-size);
        height: var(--font-size);
        float: left;
        background-size:contain;
    }*/
    .game i i:after{
        /*content:"♥";*/
        content:"✔";
    }
}