/*
 * CSS Playing Cards
 * http://selfthinker.github.com/CSS-Playing-Cards/
 *
 * Copyright (c) 2013 Anika Henke
 * Licensed under the CC BY-SA license:
 * http://creativecommons.org/licenses/by-sa/3.0/
 */

.card {
    display: inline-block;
    width: 3.3em;
    height: 4.6em;
    border: 1px solid #666;
    border-radius: .3em;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    -khtml-border-radius: .3em;
    background: #fff;
    position: relative;
    -moz-box-shadow: .2em .2em .5em #000;
    -webkit-box-shadow: .2em .2em .5em #000;
    box-shadow: .2em .2em .5em #000;
}

.card.back {
    background: #048;
    background: -moz-linear-gradient(top, #048, #005);
    background: -webkit-gradient(linear, left top, left bottom, from(#048), to(#005));
}

.card.hearts:before {
    color: #d00 !important;
}
.card.diamonds:before {
    color: #d00 !important;
}
.card.clubs:before {
    color: #000 !important;
}
.card.spades:before {
    color: #000 !important;
}

.card:before,
.card:after {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 2.5em;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0.8;
}
.card:before {
    content: attr(data-rank) "\A" attr(data-suit);
    white-space: pre;
    left: 0;
    top: 0;
}
.card:after {
    display: none;
}

/* hide suits on back of cards */
.card.back:before,
.card.back:after {
    display: none;
}

/* Rank specific styles */
.card.rank-a:before {
    content: "A" "\A" attr(data-suit);
}
.card.rank-k:before {
    content: "K" "\A" attr(data-suit);
}
.card.rank-q:before {
    content: "Q" "\A" attr(data-suit);
}
.card.rank-j:before {
    content: "J" "\A" attr(data-suit);
}
.card.rank-0:before {
    content: "10" "\A" attr(data-suit);
    font-size: 2.2em;
}
.card.rank-9:before {
    content: "9" "\A" attr(data-suit);
}
.card.rank-8:before {
    content: "8" "\A" attr(data-suit);
}
.card.rank-7:before {
    content: "7" "\A" attr(data-suit);
}
.card.rank-6:before {
    content: "6" "\A" attr(data-suit);
}
.card.rank-5:before {
    content: "5" "\A" attr(data-suit);
}
.card.rank-4:before {
    content: "4" "\A" attr(data-suit);
}
.card.rank-3:before {
    content: "3" "\A" attr(data-suit);
}
.card.rank-2:before {
    content: "2" "\A" attr(data-suit);
}

/* Suit symbols using Unicode */
.card[data-suit="♠"]:before,
.card.spades:before {
    content: attr(data-rank) "\A" "♠";
}
.card[data-suit="♥"]:before,
.card.hearts:before {
    content: attr(data-rank) "\A" "♥";
}
.card[data-suit="♦"]:before,
.card.diams:before {
    content: attr(data-rank) "\A" "♦";
}
.card[data-suit="♣"]:before,
.card.clubs:before {
    content: attr(data-rank) "\A" "♣";
}

/* Joker styles */
.card.joker {
    background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
}
.card.joker:before {
    content: "JOKER";
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
}
.card.joker.red {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    color: #fff;
}
.card.joker.black {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: #fff;
}

/* Responsive sizing */
@media (max-width: 768px) {
    .card {
        width: 2.5em;
        height: 3.5em;
        font-size: 0.9em;
    }
}