main{padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap)}
.card{background:#171717;border:1px solid #262626;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#0b0b0b,#121212);display:grid;place-items:center}
.thumb .pix{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;width:120px}
.pix div{width:100%;aspect-ratio:1/1;border-radius:3px}
.c1{background:#19c37d}.c2{background:#2b68ff}.c3{background:#f4b400}.c4{background:#ff4d4f}.c5{background:#a06bff}.c6{background:#00d0d6}
.body{padding:12px 14px 14px}
.title{font-weight:700;margin:0 0 4px}
.desc{color:#aaa;margin:0 0 12px}
.row{display:flex;gap:10px;align-items:center}

/* --- Klondike icon inside .thumb --- */
.klon {
  position: relative;
  width: 80px;
  height: 60px;
  margin: 0 auto;
}

.kcard {
  position: absolute;
  width: 40px;
  height: 55px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}

/* back (blue) */
.kcard.back {
  background: #00448a;
  border: 2px solid #001f3f;
  transform: translate(-10px, 5px) rotate(-8deg);
}

/* front (white) */
.kcard.front {
  background: #ffffff;
  border: 2px solid #dddddd;
  transform: translate(15px, -5px) rotate(4deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.krank {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.ksuit {
  font-size: 16px;
  line-height: 1;
}

/* Red suits possible later if needed */