/* Four cards: layout only. Colours and type come from lib/base.css. */
.setup { margin: 0.6rem 0 0.2rem; color: var(--paper-soft); font-size: 0.92rem; }
.rule { margin: 0 0 0.8rem; color: var(--paper-ink); font-size: 1.02rem; line-height: 1.35; }
.board.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.machine .board.cards button.card { display: grid; align-content: center; gap: 0.35rem; min-height: 6.5rem; padding: 0.5rem 0.3rem; text-align: center; overflow-wrap: anywhere; }
.card .front { font: 300 1.5rem/1.1 var(--display); }
.card .back { font: 600 0.8rem/1.2 var(--body); color: var(--paper-soft); border-top: 1px solid var(--paper-line); padding-top: 0.35rem; }
.machine .board.cards button.card.turned.held { border-color: var(--yellow); }
.machine .board.cards button.card.turned.broke { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.card.broke .back { color: var(--red); }
#turn, #next { width: 100%; margin-top: 0.9rem; }
.score { margin: 0.8rem 0 0; font: 300 1.5rem/1.1 var(--display); text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .card .front { font-size: 1.05rem; } }