@font-face
{
    font-family:                Philosopher;
    src:                        url(Philosopher-Bold.ttf);
}

@font-face
{
    font-family:                PirataOne;
    src:                        url(PirataOne-Gloomhaven.ttf);
}

@media only screen and (min-height: 500px) and (orientation: portrait) {
    .card-container {
        max-width:              49.2vh !important;  /* 33vh * (card aspect ratio == 1.476) */
    }
}

.card-container
{
    position:                   relative;
    text-align:                 center;

    -webkit-box-flex:           1.0;

    width:                      453px;
    width:                      calc(437px + 1rem); /* 437px == card image width */
    max-width:                  147.6vh;
    margin:                     8px;
}

.modifier-deck-column-1
{
    float:                      left;
    margin:                     0;
    padding:                    0;
    width:                      20%;
    height:                     100%;
}

.modifier-deck-column-2
{
    float:                      right;
    margin:                     0;
    padding:                    0;
    width:                      100%;
    margin-left:                -30%;
    height:                     100%;
}

.counter-icon
{
    position:                   relative;
    height:                     22%;
    margin:                     30% 0;

    list-style:                 none;

    border:                     none;
    overflow:                   hidden;
    outline:                    none;

    display:                    -webkit-flex;
    -webkit-flex-direction:     column;
    -webkit-justify-content:    center;

    display:                    flex;
    flex-direction:             column;
    justify-content:            center;
}

.icon-text
{
    width:                      100%;
    text-align:                 center;

    color:                      white;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;

    font-family:                'Nyala', 'Sakkal Majalla', 'Philosopher', sans-serif;
    font-size:                  150%;
}

.counter-icon .background
{
    position:                   absolute;
    z-index:                    -1;
    width:                      100%;
    height:                     100%;
    background-color:           Transparent;
    background-repeat:          no-repeat;
    background-position:        50% 50%;
    background-size:            contain;
    opacity:                    0.5;
}

.background.curse
{
    background-image:           url(images/curse.svg);
}

.background.bless
{
    background-image:           url(images/bless.svg);
}

.counter-icon.shuffle
{
    background-repeat:          no-repeat;
    background-position:        50% 50%;
    background-image:           url(images/shuffle-black.svg);
    background-size:            contain;
    cursor:                     pointer;
}

.counter-icon .button
{
    position:                   absolute;
    width:                      35%;
    height:                     100%;

    font-family:                Helvetica, Arial, sans-serif;
    font-weight:                bold;
    font-size:                  250%;
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;

    display:                    -webkit-flex;
    -webkit-flex-direction:     column;
    -webkit-justify-content:    center;

    display:                    flex;
    flex-direction:             column;
    justify-content:            center;

  -webkit-touch-callout:        none; /* iOS Safari */
    -webkit-user-select:        none; /* Safari */
     -khtml-user-select:        none; /* Konqueror HTML */
       -moz-user-select:        none; /* Firefox */
        -ms-user-select:        none; /* Internet Explorer/Edge */
            user-select:        none; /* Chrome/Opera */

    cursor: pointer;
}

.increment.button
{
    right:                      0;
    color:                      #080;
}

.decrement.button
{
    left:                       0;
    color:                      #800;
}

.draw-two.button
{
    position:                   absolute;
    right:                      33%;
    bottom:                     0;
    width:                      20%;
    height:                     20%;
    background-repeat:          no-repeat;
    background-position:        100% 50%;
    background-size:            contain;
    background-image:           url(images/draw-two.svg);
}

.card-container.modifier
{
    width:                      70%;
    float:                      right;
}

.card-container::before
{
    content:                    "";
    visibility:                 hidden;
    display:                    inline-block;
    padding-bottom:             67.7%;              /* 100% / (card aspect ratio) */
}

.card
{
    position:                   absolute;

    -webkit-backface-visibility: hidden;
    backface-visibility:        hidden;

    color:                      white;
    font-family:                'PirataOne';
    font-size:                  100%;
    text-shadow:                1px 2px 3px black;

    background-clip:            content-box;
    background-origin:          content-box;
    background-repeat:          no-repeat;
    background-size:            cover;

    box-shadow:                 5px 5px 5px rgba(0, 0, 0, 0.1);
    border-radius:              15px;
    overflow:                   hidden;
}

@-webkit-keyframes pull-front
{
    0%                          { z-index: -3; -webkit-transform: translate3d(-1rem, -1rem, 1000px) rotateY(180deg); }
    49%                         { z-index: -2; -webkit-transform: translate3d(-50%, -20%, 2000px)   rotateY(90deg); }
    51%                         { z-index:  0; -webkit-transform: translate3d(-50%, -20%, 4000px)   rotateY(90deg); }
    100%                        { z-index:  0; -webkit-transform: translate3d(0, 0, 4000px)         rotateY(0deg); }
}

@-webkit-keyframes pull-back
{
    0%                          { z-index: -3; -webkit-transform: translate3d(-1rem, -1rem, 1000px) rotateY(0deg); }
    49%                         { z-index: -2; -webkit-transform: translate3d(-50%, -20%, 2000px)   rotateY(90deg); }
    51%                         { z-index:  0; -webkit-transform: translate3d(-50%, -20%, 4000px)   rotateY(90deg); }
    100%                        { z-index:  0; -webkit-transform: translate3d(0, 0, 4000px)         rotateY(180deg); }
}

@keyframes pull-front
{
    0%                          { z-index: -3; transform: translate(-1rem, -1rem)   rotateY(180deg); }
    49%                         { z-index: -2; transform: translate(-50%, -20%)     rotateY(90deg); }
    51%                         { z-index:  0; transform: translate(-50%, -20%)     rotateY(90deg); }
    100%                        { z-index:  0; transform: translate(0, 0)           rotateY(0deg); }
}

@keyframes pull-back
{
    0%                          { z-index: -3; transform: translate(-1rem, -1rem)   rotateY(0deg); }
    49%                         { z-index: -2; transform: translate(-50%, -20%)     rotateY(90deg); }
    51%                         { z-index:  0; transform: translate(-50%, -20%)     rotateY(90deg); }
    100%                        { z-index:  0; transform: translate(0, 0)           rotateY(180deg); }
}

@-webkit-keyframes lift
{
    0%                          { z-index: -1; -webkit-transform: translateZ(3000px); }
    50%                         { z-index: -1; -webkit-transform: translateZ(3000px); }
    100%                        { z-index: -4: }
}

@keyframes lift
{
    0%                          { z-index: -1; }
    50%                         { z-index: -1; }
    100%                        { z-index: -4: }
}

.card.front.pull
{
    -webkit-animation-name:     pull-front;
    -webkit-animation-duration: 0.5s;

    animation-name:             pull-front;
    animation-duration:         0.5s;
}

.card.back.pull
{
    -webkit-animation-name:     pull-back;
    -webkit-animation-duration: 0.5s;

    animation-name:             pull-back;
    animation-duration:         0.5s;
}

.card.lift
{
    -webkit-animation-name:     lift;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: step-start;

    animation-name:             lift;
    animation-duration:         0.5s;
    animation-timing-function:  step-start;
}

.card.discard
{
    top:                        1rem;
    left:                       1rem;
    bottom:                     0;
    right:                      0;
}

.card.draw
{
    top:                        0;
    left:                       0;
    bottom:                     1rem;
    right:                      1rem;

    -webkit-transition-property: top,   left,   bottom, right,  -webkit-transform,  z-index;
    -webkit-transition-duration: 0.4s,  0.4s,   0.4s,   0.4s,   0.4s,               0s;
    -webkit-transition-delay:   0s,     0s,     0s,     0s,     0s,                 0.4s;

    transition-property:        top,    left,   bottom, right,  transform,  z-index;
    transition-duration:        0.4s,   0.4s,   0.4s,   0.4s,   0.4s,       0s;
    transition-delay:           0s,     0s,     0s,     0s,     0s,         0.4s;
}

.card.ability.front
{
    background-image:           url(images/front.jpg);
}

.card.ability.back
{
    background-image:           url(images/back.jpg);
}

.card.modifier.back
{
    background-image:           url(images/attack_mod_back.jpg);
}

.card.modifier.front img.cover
{
    position:                   absolute;
    top:                        0;
    left:                       0;
    width:                      100%;
    height:                     100%;
}

.card.modifier.front.left img.cover
{
    left:                       -30%;
    clip-path:                  inset(0% 20% 0% 20%);
}

.card.modifier.front.right img.cover
{
    left:                       30%;
    clip-path:                  inset(0% 20% 0% 20%);
}

.card ul
{
    padding:                    0;
    margin:                     0;

    list-style:                 none;
    text-align:                 center;

    font-family:                'Nyala', 'Sakkal Majalla', 'Philosopher', sans-serif;
}

.card>ul
{
    position:                   relative;
    height:                     100%;
    margin:                     0 2ch;
    padding-top:                2.5em;
    box-sizing:                 border-box;
    overflow:                   hidden;

    display:                    -webkit-box;
    -webkit-box-orient:         vertical;
    -webkit-box-align:          center;
    -webkit-box-pack:           center;

    display:                    -webkit-flex;
    -webkit-flex-direction:     column;
    -webkit-justify-content:    center;

    display:                    flex;
    flex-direction:             column;
    justify-content:            center;
}

.card li
{
    margin:                     0.25em 0;
}

.card li li
{
    font-size:                  75%;
    margin:                     0;
}

.small
{
    font-size:                  75%;
}

.icon
{
    height:                     1.25em;
    vertical-align:             text-bottom;
}

.mirrored
{
    -webkit-transform:          scale(-1,1);
    transform:                  scale(-1,1);
}

.rotated
{
    -webkit-transform:          rotateZ(-60deg);
    transform:                  rotateZ(-60deg);
}

.aoe
{
    vertical-align:             middle;
}

.aoe.h1 { height:               1.5em; }
.aoe.h2 { height:               3em; }
.aoe.h3 { height:               4.5em; }
.aoe.h4 { height:               6em; }
.aoe.h6 { height:               7.5em; }

.aoe.right-aligned
{
    position:                   absolute;
    top:                        0;
    right:                      0;
    bottom:                     0;
    margin:                     auto 0;
}

div.collapse
{
    display:                    inline-block;
    width:                      0;
    height:                     0;
}

.element
{
    height:                     1.75em;
    vertical-align:             middle;
}

.element.overlay
{
    margin-left:                -1.75em;
    z-index:                    1;
}

.card .initiative
{
    font-size:                  180%;
    text-align:                 center;

    position:                   absolute;
    left:                       0;
    top:                        18%;
    width:                      19%;
}

.card.front .name
{
    font-size:                  120%;
    text-align:                 center;

    position:                   absolute;
    left:                       0;
    top:                        0;
    width:                      100%;
    line-height:                200%;
}

.card.back .name
{
    text-align:                 center;
    font-size:                  90%;

    position:                   absolute;
    left:                       0;
    bottom:                     14%;
    width:                      100%;
}

.card .number
{
    font-family:                initial;
    font-size:                  30%;
    text-shadow:                none;

    position:                   absolute;
    left:                       3%;
    bottom:                     5%;
}

img[src="images/shuffle.svg"]
{
    position:                   absolute;
    right:                      3%;
    bottom:                     5%;
    height:                     1.25em;
}

.card::selection
{
    color:                      rgba(0, 0, 0, 0);
    background:                 rgba(0, 0, 0, 0);
}

.up
{
    -webkit-transform:          rotateY(0deg);
    transform:                  rotateY(0deg);
}

.down
{
    -webkit-transform:          rotateY(180deg);
    transform:                  rotateY(180deg);
}