.c24-cards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.c24-card {
  width: 64px; height: 88px; border-radius: 14px;
  background: #fff; box-shadow: var(--shadow-sm);
  border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 34px; font-weight: 900; color: var(--ink);
  transition: transform .1s ease, opacity .15s ease; cursor: pointer;
}
.c24-card .suit { font-size: 18px; color: var(--coral); }
.c24-card.used { opacity: .35; transform: scale(.92); pointer-events: none; }
.c24-card:active { transform: scale(.95); }

.c24-expr {
  min-height: 52px; background: var(--surface-2);
  border: 2px dashed var(--line); border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: 22px; font-weight: 800;
  padding: 8px 12px; word-break: break-all; text-align: center;
}
.c24-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 420px; margin: 0 auto; }
.c24-key {
  min-height: 54px; border: 2px solid var(--line); border-radius: 14px;
  background: var(--surface); font-size: 22px; font-weight: 800; color: var(--ink); cursor: pointer;
}
.c24-key:active { transform: scale(.95); }
.c24-key.op { background: var(--surface-2); color: var(--grape); }
.c24-key.go { background: var(--mint); color: #fff; }
.c24-key.num { background: var(--coral); color: #fff; }