/**
 * Styles for CSS Playing Cards
 *
 * @author   Anika Henke <anika@selfthinker.org>
 * @license  CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0]
 * @version  2011-06-14
 * @link     http://selfthinker.github.com/CSS-Playing-Cards/
 */

/* card itself
********************************************************************/

.playingCards .card {
    display: inline-block;
    width: 3.3em;
    height: 4.6em;
    border: 4px solid #8BFDFE;
    border-radius: .3em;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    -khtml-border-radius: .3em;
    padding: .25em;
    margin: 0 .5em .5em 0;
    text-align: center;
    font-size: 3.5em; /* @change: adjust this value to make bigger or smaller cards */
    font-weight: normal;
    font-family: Arial, sans-serif;
    position: relative;
    background-color: rgb(38, 89, 142, 0.07);
    -moz-box-shadow: .2em .2em .5em #1041FF;
    -webkit-box-shadow: .2em .2em .5em #1041FF;
    box-shadow: .2em .2em .5em #1041FF;
}

.playingCards .rank {
  font-family: Roboto-Black.ttf;
  color: #ffefca;
  text-shadow: 0 0 3vw #2356FF;
}

.playingCards a.card a.hover {
    text-decoration: none;
}

/* selected and hover state */
.playingCards a.card:hover, .playingCards a.card:active, .playingCards a.card:focus,
.playingCards label.card:hover,
.playingCards strong .card {
    bottom: 0.5em;
}
.playingCards label.card {
    cursor: pointer;
}

.playingCards .card .rank,
.playingCards .card .,
.playingCards .card .datum {
    display: block;
    line-height: 1;
    text-align: left;
}
.playingCards .card .rank {
      font-size: 0.4em;
}
.playingCards .card .datum {
      font-size: 0.3em;
}
.playingCards .card .suit {
    line-height: .7;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* pushes content to bottom */
    align-items: center;
}

/* checkbox */
.playingCards .card input {
    margin-top: -.05em;
    font: inherit;
}

.playingCards.inText .card input {
    margin-top: 0;
}

.playingCards.inText .card {
    font-size: .4em;
    vertical-align: middle;
}
.playingCards.inText .card span.rank,
.playingCards.inText .card span.suit {
    text-align: center;
}
.playingCards.inText .card span.rank {
    font-size: 2em;
    margin-top: .2em;
}
.playingCards.inText .card span.suit {
    font-size: 2.5em;
}
.playingCards.inText .card .suit:after,
.playingCards.inText .card.joker .rank:after {
    content: "" !important;
}
.playingCards.inText .card .rank:after {
    left: .5em;
    padding: 0 .1em;
}

.playingCards ul {
    display: flex;
    flex-wrap: wrap;           /* allow cards to wrap to the next line */
    justify-content: center;   /* center cards horizontally */
    align-items: flex-start;   /* align cards at the top of each row */
    gap: 1em;                  /* spacing between cards */
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

.playingCards ul li {
    display: flex;             /* ensures li wraps the card cleanly */
}

/* Optional: make cards full width on very small screens */
@media (max-width: 480px) {
    .playingCards ul li {
        width: 80%;
        justify-content: center;
    }

    .playingCards ul li a.card {
        width: 80%;            /* scale card width on small screens */
        max-width: 12em;       /* optional maximum */
    }
}