/* ============================================================================
   Bavarian card sprite (deutschesblatt.png, 960x816, 8 cols x 4 rows).
   Columns left->right: A K O U X(10) 9 8 7   (Rank notation)
   Rows   top->bottom : E G H S               (Suit letter)

   The 32 position classes are named exactly like Card.Code (EA, EK ... S7) so a
   component can bind class="@card.Code" directly. They use PERCENTAGE
   background-position so a single set of classes aligns correctly with any of
   the karte1/karte2/karte3 size classes (px offsets would only match one
   background-size; percentages are scale-independent and select the same cell).

   Cell layout (col 0..7, row 0..3) is identical to CardConsumer2's
   sauspielblatt.css; percentage positions are the proven px positions expressed
   scale-independently:  x% = col/7*100 , y% = row/3*100.
   ============================================================================ */

/* ---- Size classes (aspect-correct: sprite cell is 120x204 = 60x102 etc.) ---- */
.karte1 {
    background-image: url('../assets/deutschesblatt.png');
    background-size: 800% 400%;
    background-repeat: no-repeat;
    display: inline-block;
    width: 60px;
    height: 102px;
}

.karte2 {
    background-image: url('../assets/deutschesblatt.png');
    background-size: 800% 400%;
    background-repeat: no-repeat;
    display: inline-block;
    width: 90px;
    height: 153px;
}

.karte3 {
    background-image: url('../assets/deutschesblatt.png');
    background-size: 800% 400%;
    background-repeat: no-repeat;
    display: inline-block;
    width: 120px;
    height: 204px;
}

/* ---- 32 position classes, named exactly like Card.Code ---- */
/* Row 0: Eichel */
.EA { background-position: 0%    0%; }
.EK { background-position: 14.2857%  0%; }
.EO { background-position: 28.5714%  0%; }
.EU { background-position: 42.8571%  0%; }
.EX { background-position: 57.1429%  0%; }
.E9 { background-position: 71.4286%  0%; }
.E8 { background-position: 85.7143%  0%; }
.E7 { background-position: 100%   0%; }

/* Row 1: Gras */
.GA { background-position: 0%    33.3333%; }
.GK { background-position: 14.2857%  33.3333%; }
.GO { background-position: 28.5714%  33.3333%; }
.GU { background-position: 42.8571%  33.3333%; }
.GX { background-position: 57.1429%  33.3333%; }
.G9 { background-position: 71.4286%  33.3333%; }
.G8 { background-position: 85.7143%  33.3333%; }
.G7 { background-position: 100%   33.3333%; }

/* Row 2: Herz */
.HA { background-position: 0%    66.6667%; }
.HK { background-position: 14.2857%  66.6667%; }
.HO { background-position: 28.5714%  66.6667%; }
.HU { background-position: 42.8571%  66.6667%; }
.HX { background-position: 57.1429%  66.6667%; }
.H9 { background-position: 71.4286%  66.6667%; }
.H8 { background-position: 85.7143%  66.6667%; }
.H7 { background-position: 100%   66.6667%; }

/* Row 3: Schellen */
.SA { background-position: 0%    100%; }
.SK { background-position: 14.2857%  100%; }
.SO { background-position: 28.5714%  100%; }
.SU { background-position: 42.8571%  100%; }
.SX { background-position: 57.1429%  100%; }
.S9 { background-position: 71.4286%  100%; }
.S8 { background-position: 85.7143%  100%; }
.S7 { background-position: 100%   100%; }

/* ---- Playable (clickable) card: god-mode interactive play ---- */
.card-playable {
    cursor: pointer;
    border-radius: 7px;
    box-shadow: 0 0 0 3px #2e8b57, 0 4px 10px rgba(0, 0, 0, 0.35);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.card-playable:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 0 3px #3cb371, 0 8px 16px rgba(0, 0, 0, 0.45);
}

/* ---- Hidden card back (no back image exists in the sprite; CSS-only) ---- */
.karte-back {
    background-image:
        repeating-linear-gradient(45deg,
            #1a2a6c 0, #1a2a6c 6px,
            #20347e 6px, #20347e 12px);
    background-color: #1a2a6c;
    border: 2px solid #f5f5f0;
    border-radius: 7px;
    box-sizing: border-box;
}