/* ============================================
   TAROT CARDS - Essential Card Styles Only
   ============================================ */

/* Card Area */
#cardarea-wrap {
    background-image: url("/tarot-reader/images/shuffle-celtic.png");
    background-repeat: no-repeat;
    background-position: center 20px;
    background-size: 300px auto;
    min-width: 320px;
    min-height: 750px;
    margin: 0 auto;
    margin-top: 20px;
    overflow: visible;
    position: relative;
}

#cardarea {
    position: relative;
    left: 50%;
    max-width: 320px;
    height: 100%;
}

.deck {
    position: relative;
    width: 0;
    height: 0;
}

/* Card Base Styles */
.card {
    position: absolute;
    display: inline-block;
    left: -1.9375rem;
    top: -2.75rem;
    width: 3.21rem;
    height: 5.5rem;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 1;
}

.card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 100;
}

.card .face {
    height: 100%;
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 4px;
}

.card .back {
    position: absolute;
    background-image: url("/tarot-reader/images/small/back.gif");
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 4px;
}

/* Card Face Images - Swords */
.card.swords.rank1 .face { background-image: url("/tarot-reader/images/small/S1.png"); }
.card.swords.rank2 .face { background-image: url("/tarot-reader/images/small/S2.png"); }
.card.swords.rank3 .face { background-image: url("/tarot-reader/images/small/S3.png"); }
.card.swords.rank4 .face { background-image: url("/tarot-reader/images/small/S4.png"); }
.card.swords.rank5 .face { background-image: url("/tarot-reader/images/small/S5.png"); }
.card.swords.rank6 .face { background-image: url("/tarot-reader/images/small/S6.png"); }
.card.swords.rank7 .face { background-image: url("/tarot-reader/images/small/S7.png"); }
.card.swords.rank8 .face { background-image: url("/tarot-reader/images/small/S8.png"); }
.card.swords.rank9 .face { background-image: url("/tarot-reader/images/small/S9.png"); }
.card.swords.rank10 .face { background-image: url("/tarot-reader/images/small/S0.png"); }
.card.swords.rank11 .face { background-image: url("/tarot-reader/images/small/SP.png"); }
.card.swords.rank12 .face { background-image: url("/tarot-reader/images/small/SN.png"); }
.card.swords.rank13 .face { background-image: url("/tarot-reader/images/small/SQ.png"); }
.card.swords.rank14 .face { background-image: url("/tarot-reader/images/small/SK.png"); }

/* Card Face Images - Cups */
.card.cups.rank1 .face { background-image: url("/tarot-reader/images/small/C1.png"); }
.card.cups.rank2 .face { background-image: url("/tarot-reader/images/small/C2.png"); }
.card.cups.rank3 .face { background-image: url("/tarot-reader/images/small/C3.png"); }
.card.cups.rank4 .face { background-image: url("/tarot-reader/images/small/C4.png"); }
.card.cups.rank5 .face { background-image: url("/tarot-reader/images/small/C5.png"); }
.card.cups.rank6 .face { background-image: url("/tarot-reader/images/small/C6.png"); }
.card.cups.rank7 .face { background-image: url("/tarot-reader/images/small/C7.png"); }
.card.cups.rank8 .face { background-image: url("/tarot-reader/images/small/C8.png"); }
.card.cups.rank9 .face { background-image: url("/tarot-reader/images/small/C9.png"); }
.card.cups.rank10 .face { background-image: url("/tarot-reader/images/small/C0.png"); }
.card.cups.rank11 .face { background-image: url("/tarot-reader/images/small/CP.png"); }
.card.cups.rank12 .face { background-image: url("/tarot-reader/images/small/CN.png"); }
.card.cups.rank13 .face { background-image: url("/tarot-reader/images/small/CQ.png"); }
.card.cups.rank14 .face { background-image: url("/tarot-reader/images/small/CK.png"); }

/* Card Face Images - Wands */
.card.wands.rank1 .face { background-image: url("/tarot-reader/images/small/W1.png"); }
.card.wands.rank2 .face { background-image: url("/tarot-reader/images/small/W2.png"); }
.card.wands.rank3 .face { background-image: url("/tarot-reader/images/small/W3.png"); }
.card.wands.rank4 .face { background-image: url("/tarot-reader/images/small/W4.png"); }
.card.wands.rank5 .face { background-image: url("/tarot-reader/images/small/W5.png"); }
.card.wands.rank6 .face { background-image: url("/tarot-reader/images/small/W6.png"); }
.card.wands.rank7 .face { background-image: url("/tarot-reader/images/small/W7.png"); }
.card.wands.rank8 .face { background-image: url("/tarot-reader/images/small/W8.png"); }
.card.wands.rank9 .face { background-image: url("/tarot-reader/images/small/W9.png"); }
.card.wands.rank10 .face { background-image: url("/tarot-reader/images/small/W0.png"); }
.card.wands.rank11 .face { background-image: url("/tarot-reader/images/small/WP.png"); }
.card.wands.rank12 .face { background-image: url("/tarot-reader/images/small/WN.png"); }
.card.wands.rank13 .face { background-image: url("/tarot-reader/images/small/WQ.png"); }
.card.wands.rank14 .face { background-image: url("/tarot-reader/images/small/WK.png"); }

/* Card Face Images - Pentacles */
.card.pentacles.rank1 .face { background-image: url("/tarot-reader/images/small/P1.png"); }
.card.pentacles.rank2 .face { background-image: url("/tarot-reader/images/small/P2.png"); }
.card.pentacles.rank3 .face { background-image: url("/tarot-reader/images/small/P3.png"); }
.card.pentacles.rank4 .face { background-image: url("/tarot-reader/images/small/P4.png"); }
.card.pentacles.rank5 .face { background-image: url("/tarot-reader/images/small/P5.png"); }
.card.pentacles.rank6 .face { background-image: url("/tarot-reader/images/small/P6.png"); }
.card.pentacles.rank7 .face { background-image: url("/tarot-reader/images/small/P7.png"); }
.card.pentacles.rank8 .face { background-image: url("/tarot-reader/images/small/P8.png"); }
.card.pentacles.rank9 .face { background-image: url("/tarot-reader/images/small/P9.png"); }
.card.pentacles.rank10 .face { background-image: url("/tarot-reader/images/small/P0.png"); }
.card.pentacles.rank11 .face { background-image: url("/tarot-reader/images/small/PP.png"); }
.card.pentacles.rank12 .face { background-image: url("/tarot-reader/images/small/PN.png"); }
.card.pentacles.rank13 .face { background-image: url("/tarot-reader/images/small/PQ.png"); }
.card.pentacles.rank14 .face { background-image: url("/tarot-reader/images/small/PK.png"); }

/* Card Face Images - Major Arcana */
.card.major.rank1 .face { background-image: url("/tarot-reader/images/small/01.png"); }
.card.major.rank2 .face { background-image: url("/tarot-reader/images/small/02.png"); }
.card.major.rank3 .face { background-image: url("/tarot-reader/images/small/03.png"); }
.card.major.rank4 .face { background-image: url("/tarot-reader/images/small/04.png"); }
.card.major.rank5 .face { background-image: url("/tarot-reader/images/small/05.png"); }
.card.major.rank6 .face { background-image: url("/tarot-reader/images/small/06.png"); }
.card.major.rank7 .face { background-image: url("/tarot-reader/images/small/07.png"); }
.card.major.rank8 .face { background-image: url("/tarot-reader/images/small/08.png"); }
.card.major.rank9 .face { background-image: url("/tarot-reader/images/small/09.png"); }
.card.major.rank10 .face { background-image: url("/tarot-reader/images/small/10.png"); }
.card.major.rank11 .face { background-image: url("/tarot-reader/images/small/11.png"); }
.card.major.rank12 .face { background-image: url("/tarot-reader/images/small/12.png"); }
.card.major.rank13 .face { background-image: url("/tarot-reader/images/small/13.png"); }
.card.major.rank14 .face { background-image: url("/tarot-reader/images/small/14.png"); }
.card.major.rank15 .face { background-image: url("/tarot-reader/images/small/15.png"); }
.card.major.rank16 .face { background-image: url("/tarot-reader/images/small/16.png"); }
.card.major.rank17 .face { background-image: url("/tarot-reader/images/small/17.png"); }
.card.major.rank18 .face { background-image: url("/tarot-reader/images/small/18.png"); }
.card.major.rank19 .face { background-image: url("/tarot-reader/images/small/19.png"); }
.card.major.rank20 .face { background-image: url("/tarot-reader/images/small/20.png"); }
.card.major.rank21 .face { background-image: url("/tarot-reader/images/small/21.png"); }
.card.major.rank22 .face { background-image: url("/tarot-reader/images/small/00.png"); }

/* Selected card styling */
.card[id] {
    z-index: 50;
}

/* Reversed card */
.card.reversed {
    transform: rotate(180deg);
}