/* Copyright (C) 2021, David Garber */

.cardRect {
    stroke-width: 2px;
}

.mobile .faceDown .cardRect {
    fill:#808080;
}

.desktop .faceDown .cardRect {
    fill:url(#grayGradient);
}

.faceDown .cardCover {
    stroke: #999999;
}


.faceDown .rankLabel {
    fill:transparent;
}

.mobile .faceUp .cardRect.suit0 {
    fill:#cc4433;
}

.mobile .faceUp .cardRect.suit1 {
    fill:#ddcc33;
}

.mobile .faceUp .cardRect.suit2 {
    fill:#66bb33;
}

.mobile .faceUp .cardRect.suit3 {
    fill:#3399cc;
}

.mobile .faceUp .cardRect.suit4 {
    fill:#9933cc;
}

.left-shade {
    fill: rgba(255,200,255,0.1);
}

.right-shade {
    fill: rgba(200,150,200,0.1);
}

.drip-shade {
    fill: rgba(0,0,0,0.2);
}

.circles {
    stroke: rgba(153,153,153,0.2);
    stroke-width:1px;
    fill: transparent;
}

.ivy-leaf {
    fill: rgba(0,0,0,0.2);
}

.ivy-vine {
    stroke: rgba(0,0,0,0.2);
    stroke-width:0.3px;
    fill: transparent;
}

.oct-light {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1px;
    fill: transparent;
}

.brick-lines {
	stroke: #ffaaaa;
	stroke-width: 0.5px;
	fill: transparent;
}

.faceDown .leftPattern {
    fill:none;
}

.faceDown .rightPattern {
    fill:none;
}

.faceUp .rightPattern.suit0 {
    fill:url(#pattern-circles);
}

.faceUp .leftPattern.suit1 {
    fill:url(#pattern-circles);
}

.faceUp .rightPattern.suit1 {
    fill:url(#pattern-vines);
}

.faceUp .leftPattern.suit2 {
    fill:url(#pattern-vines);
}

.faceUp .rightPattern.suit2 {
    fill:url(#pattern-drips);
}

.faceUp .leftPattern.suit3 {
    fill:url(#pattern-drips);
}

.faceUp .rightPattern.suit3 {
    fill:url(#pattern-cubes);
}

.faceUp .leftPattern.suit4 {
    fill:url(#pattern-cubes);
}

.faceUp .rightPattern.suit4 {
    fill:url(#pattern-bricks);
}

.faceUp .leftPattern.suit0 {
    fill:url(#pattern-bricks);
}

.desktop .faceUp .cardRect.suit0 {
    fill:url(#redGradient);
}

.desktop .faceUp .cardRect.suit1 {
    fill:url(#yellowGradient);
}

.desktop .faceUp .cardRect.suit2 {
    fill:url(#greenGradient);
}

.desktop .faceUp .cardRect.suit3 {
    fill:url(#blueGradient);
}

.desktop .faceUp .cardRect.suit4 {
    fill:url(#purpleGradient);
}

.desktop .faceUp .cardRect.suit5 {
    fill: url(#wildGradient);
}

.faceUp .cardCover.suit0 {
    stroke: #E09142;
}

.faceUp .cardCover.suit1 {
    stroke: #B7E042;
}

.faceUp .cardCover.suit2 {
    stroke: #4FD3B0;
}

.faceUp .cardCover.suit3 {
    stroke: #4F4FD3;
}

.faceUp .cardCover.suit4 {
    stroke: #D34FA1;
}

.faceUp .cardCover.suit5 {
    stroke: #000000;
    stroke-width: 1.5pt;
}

.cardCover {
    fill: transparent;
    stroke: transparent;
}

.faceUp .rankLabel {
    font-family: "Arial";
    font-size: 20pt;
    text-shadow: 0 0 3px black, 0 0 6px black, 0 0 9px black;
    color: white;
    font-weight: 900;
    text-anchor: middle;
    fill: white;
}

.emptyDiv {
    position: absolute;
    left: 0px;
    top: 0px;
}

.small .cardSvg {
    transform: scale(.8);
}
.small .emptySvg {
    transform: scale(.8);
}
.small .optionSvg {
    transform: scale(.8);
    margin-bottom: -10px;
}

.smaller .cardSvg {
    transform: scale(.6);
}
.smaller .emptySvg {
    transform: scale(.6);
}
.smaller .optionSvg {
    transform: scale(.6);
    margin-bottom: -20px;
}

.emptyRect {
    fill:url(#blackGradient);
}

#deckArea .emptyDiv {
    transform: translate(0, 14px);
}

.cardSvg {
    display: block;
    position: absolute;
}

.deck .cardDiv {
    display: inline-block;
    position: relative;
    width: 1px;
}

.draw .cardDiv {
    display: inline-block;
    position: relative;
    width: 40px;
}

.draw .gText {
    transform: translate(-20px, 0px);
}

.draw.longList .cardDiv {
    width: 30px;
}

.draw.longList.longList20 .cardDiv {
    width: 20px;
}

.draw.longList.longList20.longList15 .cardDiv {
    width: 15px;
}

.draw .g {
    transform: rotate(-30deg);
    transform-origin: center center;
}

.draw .gText {
    transform: rotate(30deg);
    transform-origin: center top;
}

.draw .topCard .gText {
    transform: rotate(30deg) translate(8px, -10px) scale(1.5);
}

.stackBox .cardDiv {
    display: block;
    position: relative;
    height: 4px;
}

.stackBox .descBox .cardDiv {
    display: block;
    position: relative;
    height: 30px;
}

.stackBox .topCard .gText {
    transform: scale(1.5);
    transform-origin: center top;
}

.stackBox .oddCard .down.g {
    transform: rotate(2deg);
    transform-origin: center bottom;
}

.stackBox .evenCard .down.g {
    transform: rotate(-2deg);
    transform-origin: center bottom;
}

.doneBox .cardDiv {
    display: inline-block;
    position: relative;
    width: 4px;
    height: 4px;
}

.doneBox .cardSvg {
    transform: rotate(-90deg) translate(0px, 20px);
    /* transform-origin: center center; */
}

.small .doneBox .cardSvg {
    transform: rotate(-90deg) translate(0px, 20px) scale(.8);
}
.smaller .doneBox .cardSvg {
    transform: rotate(-90deg) translate(0px, 20px) scale(.6);
}

.doneBox .gText {
    transform: rotate(90deg) translate(15px, -65px);
}

.doneBox .rankLabel {
    font-size: 30pt;
}

.doneBox .emptyDiv {
    display: block;
    position: absolute;
    transform: translate(16px, 8px) rotate(90deg);
    transform-origin: center center;
}

.faceUp .cardCover.selected {
    stroke: white;
    stroke-width: 4px;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media screen and (-ms-high-contrast: active) {
    .faceUp .leftPattern.suit4 {
        fill: url(#pattern-cubes2);
    }

    .faceUp .rightPattern.suit3 {
        fill: url(#pattern-cubes2);
    }

    .shade {
        fill: black;
    }

    .drip-shade {
        fill: black;
    }

    .circles {
        stroke: black;
        stroke-width: 1px;
        fill: transparent;
    }

    .ivy-leaf {
        fill: black;
    }

    .ivy-vine {
        stroke: black;
        stroke-width: 0.3px;
        fill: transparent;
    }

    .oct-light {
        stroke: black;
        stroke-width: 1px;
        fill: transparent;
    }
}

@media screen and (prefers-contrast: more) {
    .faceUp .leftPattern.suit4 {
        fill: url(#pattern-cubes2);
    }

    .faceUp .rightPattern.suit3 {
        fill: url(#pattern-cubes2);
    }

    .shade {
        fill: black;
    }

    .drip-shade {
        fill: black;
    }

    .circles {
        stroke: black;
        stroke-width: 1px;
        fill: transparent;
    }

    .ivy-leaf {
        fill: black;
    }

    .ivy-vine {
        stroke: black;
        stroke-width: 0.3px;
        fill: transparent;
    }

    .oct-light {
        stroke: black;
        stroke-width: 1px;
        fill: transparent;
    }
}