/* resources used: */
/* CSS playing cards: http://www.brainjar.com/css/cards */
/* card flipping: https://www.w3schools.com/howto/howto_css_flip_card.asp */

body {
    background-color: #222;
    text-align: center;
    overflow: hidden;
    font-family: "PT Sans", sans-serif;
}

.announcement {
    position: fixed;
    color: white;
}

.score {
    position: absolute;
    font-size: 1.5em;
    font-weight: normal;
    left: 50%;
    transform: translateX(-50%);
}

.card {
    font-weight: bold;
    position: relative;
    width: 100%;
    height: 100%;
}

@media screen and (orientation: portrait) {
    .card {
        font-family: monospace, monospace;
        font-size: 2em;
        transform: translateX(-50%);
    }

    #dealerScore {
        position: fixed;
        top: 8em;
    }

    #playerScore {
        bottom: 1em;
    }

    #title {
        top:3em;
        font-size: 2.5em;
        line-height: 0.25em;
    }
    #subtext {
        line-height: 1em;
        font-size: 1.5em;
        font-weight: 100;
        top: 7em;
    }

    .btn {
        font-size: 1em;
    }

    #playAgain {
        opacity: 0;
        cursor: default;
        bottom: 7.5em;
    }

    .suit-wrapper {
        font-size: 85%;
    }
}

@media screen and (orientation: landscape) {

    .card {
        font-size: 2.5em;
        transform: translateX(-15%);
    }

    #dealerScore {
        position: fixed;
        top: 10em;
    }

    #playerScore {
        bottom: 1em;
    }

    #title {
        top:3em;
        font-size: 3.5em;
        line-height: 0.25em;
    }
    #subtext {
        line-height: 2em;
        font-size: 2em;
        font-weight: 100;
    }

    .btn {
        font-size: 1.25em;
    }

    #playAgain {
        opacity: 0;
        cursor: default;
        bottom:6em;
    }
}

.card-index {
    font-size: 50%;
    font-weight: bold;
    text-align: center;
    position: absolute;
    white-space: pre-wrap;
    line-height: 1.2em;
    -webkit-backface-visibility: hidden; /* again */
    backface-visibility: hidden;
}

.top-left {
    left: 0.25em;
    top:  0.3em;
}

.bot-right {
    right: 0.25em;
    bottom:  0.3em;
    transform: rotate(180deg)
}

.front {
    border-radius: 0.35em;
    background-color: #fff;
    position: relative;
    width: 4em;
    height: 5.5em;
    -webkit-transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    margin: 0 auto; /* horizontal centering */
    box-shadow: 0em 0em 0.025em .03em rgba(0, 0, 0, 0.35);
}

.suit-wrapper {
    position: relative;
    width: 2.85em;
    height: 5em;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-backface-visibility: hidden; /* again */
    backface-visibility: hidden;
}

.cardback {
    border-radius: 0.35em;
    background-color: #fff;
    background-image: url('./images/back.png');
    image-rendering: pixelated;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    position: absolute;
    width:  100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: 0em 0em 0.025em .03em rgba(0, 0, 0, 0.35);
}

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

.no-flip {
    position: absolute;
}

@media only screen and (max-width: 768px) {
    #deck {
        display: none;
    }
}

.hand {
    position: fixed;
    width: 30%;
    height: 20%;
    display: flex;
    justify-content: center;
    padding: 1em;
    left: 50%;
    transform: translateX(-50%);
}

#dealer {
    position: fixed;

    top: 0em;
}

#player {
    bottom: 0%;
}

.middle {
    left: 0%;
    right: 0%;
    top: 20%;
    bottom: 20%;
    position: absolute;
    padding: 1em;
}

.vertical-center {
    margin: 0;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#movingCard {
    position: fixed;
    bottom: 0px;
    left: 0px;
}

.shadow-text {
    text-shadow: 0 0 8px #FFF;
}

/* card symbol spots */
/* for more info see http://www.brainjar.com/css/cards */
.spotA1 { position: absolute; left: 0; top: 0; }
.spotA2 { position: absolute; left: 0; top: 37%; transform: translateY(-50%); }
.spotA3 { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.spotA4 { position: absolute; left: 0; top: 63%; transform: translateY(-50%); }
.spotA5 { position: absolute; left: 0; bottom: 0; }
.spotB1 { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.spotB1 { position: absolute; left: 50%; top: 25%; transform: translateX(-50%) translateY(-50%); }
.spotB2 { position: absolute; left: 50%; top: 33%; transform: translateX(-50%) translateY(-50%); }
.spotB3 { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
.spotB4 { position: absolute; left: 50%; top: 66%; transform: translateX(-50%) translateY(-50%); }
.spotB5 { position: absolute; left: 50%; top: 75%; transform: translateX(-50%) translateY(-50%); }
.spotB6 { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.spotC1 { position: absolute; right: 0; top: 0; }
.spotC2 { position: absolute; right: 0; top: 37%; transform: translateY(-50%); }
.spotC3 { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.spotC4 { position: absolute; right: 0; top: 63%; transform: translateY(-50%); }
.spotC5 { position: absolute; right: 0; bottom: 0; }

.centered-spot { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); font-size: 200%; -webkit-backface-visibility: hidden; backface-visibility: hidden;}

/* Stole this CSS button from Duolingo lol */
/* See: https://getcssscan.com/css-buttons-examples */
.btn {
  appearance: button;
  background-color: #aa1616;
  border: solid transparent;
  border-radius: 1em;
  border-width: 0 0 0.25em;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: din-round,sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.25em;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 0.75em 1em;
  text-align: center;
  text-transform: uppercase;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: fit-content;
}

.btn:after {
  background-clip: padding-box;
  background-color: #ff0000;
  border: solid transparent;
  border-radius: 1em;
  border-width: 0 0 0.25em;
  bottom: -0.25em;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.btn:main, .btn:focus {
  user-select: auto;
}

.btn:hover:not(:disabled) {
  filter: brightness(1.1);
  -webkit-filter: brightness(1.1);
}

.btn:disabled {
  cursor: auto;
}