/* match: the card grid is sized by Tappaloo.fitInto so it fills the space in any orientation */
.cards{display:grid;gap:0.625rem;justify-content:center;align-content:center}
.card{width:100%;height:100%;border-radius:clamp(0.625rem,calc(var(--cell,5rem)*.18),1.125rem);background:var(--sea);color:var(--paper);font-size:calc(var(--cell,5rem)*.52);line-height:1;display:grid;place-items:center;padding:0;box-shadow:0 0.312rem 0 #146a7d;font-family:var(--f-display);font-weight:800;transition:transform .15s,background .15s}
.card .front{display:none}
.card.up{background:var(--sun-soft);box-shadow:0 0.312rem 0 var(--sun);animation:flip .25s}
.card.up .front{display:block}.card.up .cover{display:none}
.card .cover{font-size:.8em;opacity:.9;text-shadow:0 3px 0 #146a7d}
.card.done{background:#DDF5E8;box-shadow:0 0.312rem 0 var(--leaf);animation:matched .4s}
@keyframes flip{from{transform:rotateY(90deg)}}
@keyframes matched{50%{transform:scale(1.08)}}