body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: #f0f8ff; }
.container { text-align: center; }
.card { display: inline-block; width: 200px; height: 200px; border: 3px solid #333; border-radius: 50%; margin: 10px; background: white; position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.card.bw { filter: grayscale(100%) contrast(150%); }
.symbol { position: absolute; width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; }
.label { font-size: 10px; text-align: center; margin-top: 10px; }
#cards { display: flex; flex-wrap: wrap; justify-content: center; }
button { padding: 10px 20px; margin: 10px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
button:hover { background: #0056b3; }