.card {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 72px; height: 104px; border-radius: 12px; color: #fff; flex: 0 0 auto;
  box-shadow: 0 3px 10px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.85), inset 0 0 0 6px rgba(0,0,0,.08);
  user-select: none; -webkit-user-select: none; transition: transform .15s, box-shadow .15s;
}
.card .cl { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.card .cs { font-size: 11px; font-weight: 600; margin-top: 6px; opacity: .92; text-align: center; padding: 0 4px; line-height: 1.15; }
.card .cstart, .card .cdog { position: absolute; top: 7px; left: 9px; font-size: 13px; opacity: .9; }
.card .magnet { display: inline-block; transform: rotate(180deg); }
.bg-blue { background: linear-gradient(160deg, #2f7fe0, #1a4fa8); }
.bg-red { background: linear-gradient(160deg, #e2483c, #a5221b); }
.bg-black { background: linear-gradient(160deg, #3a3a3f, #0e0e10); }
.bg-black .cs { color: #ffcf3f; }
.card.back { background: repeating-linear-gradient(45deg, #2b2f3a 0 8px, #353a47 8px 16px); }