/* Pairs: patterned cards on a crimson cloth. */
:root{--bg:#a3213a;--fg:#fdeee0;--back:#7c1529;--back-2:#8e1b32;--face:#fdf3e3;--btn:#7c1529;--btn-fg:#fdeee0;--go:#fdeee0;--go-fg:#7c1529}
.cards{--gap:8px;--cell:min(calc((100cqw - (var(--cols) - 1)*var(--gap))/var(--cols)),calc((100cqh - (var(--rows) - 1)*var(--gap))/var(--rows)/1.2),108px);display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-auto-rows:calc(var(--cell)*1.2);gap:var(--gap)}
.card{position:relative;perspective:600px}
.card .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .28s}
.card.up .in{transform:rotateY(180deg)}
.card .f{position:absolute;inset:0;border-radius:calc(var(--cell)*.13);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.card .back{background:repeating-linear-gradient(45deg,var(--back) 0 6px,var(--back-2) 6px 12px);box-shadow:inset 0 0 0 3px var(--face),inset 0 0 0 5px var(--back),0 3px 0 #0003}
.card .face{display:grid;place-items:center;background:var(--face);transform:rotateY(180deg);box-shadow:0 3px 0 #0003}
.card .face svg{width:62%;height:auto}
.card.found .face{opacity:.5;box-shadow:none}
.label{font-size:14px;font-weight:700}
.sizes{display:flex;align-items:center;gap:8px}
.set{display:flex;gap:4px}
.sizes .btn{min-width:40px;padding:0 6px;font-variant-numeric:tabular-nums}
.sizes .btn[aria-pressed=true]{background:var(--go);color:var(--go-fg)}
@media(max-width:359px){.label{display:none}}
@media(prefers-reduced-motion:reduce){.card .in{transition:none}}