.card{--w:64px;width:var(--w);aspect-ratio:5/7;perspective:600px;border-radius:calc(var(--w) * .12);background:0 0;border:0;flex:none;padding:0;position:relative}.card-sm{--w:clamp(26px, 8.5vw, 44px)}.card-md{--w:clamp(52px, 17vw, 84px)}.card-lg{--w:clamp(66px, 22vw, 112px)}.card-inner{transform-style:preserve-3d;position:absolute;inset:0}.card-side{backface-visibility:hidden;border-radius:calc(var(--w) * .12);position:absolute;inset:0;overflow:hidden;box-shadow:0 1px 2px #0000002e}.card-back{transform:rotateY(180deg)}.card-empty{border:2px dashed var(--line)}.card-active{cursor:pointer}.card-hint .card-side{box-shadow:0 0 0 2px var(--a), 0 4px 14px -4px var(--a)}.card-selected .card-side{box-shadow:0 0 0 3px var(--b-ink), 0 6px 16px -4px var(--b-ink)}.card-selected{transform:translateY(-6%)}.card-locked:after{content:"🔒";font-size:calc(var(--w) * .3);position:absolute;top:-6px;right:-4px}.card-active:active .card-inner{transform:scale(.96)}.classic-face{background:var(--card-face);color:var(--card-ink);border:1px solid var(--card-edge);border-radius:inherit;font-family:var(--f-display);position:absolute;inset:0}.classic-face.red{color:var(--card-red)}.classic-face .corner{line-height:.95;font-size:calc(var(--w) * .22);justify-items:center;display:grid;position:absolute}.classic-face .corner b{font-weight:700}.classic-face .corner i{font-size:.85em;font-style:normal}.classic-face .tl{top:5%;left:7%}.classic-face .br{bottom:5%;right:7%;transform:rotate(180deg)}.classic-face .pip{font-size:calc(var(--w) * .5);place-items:center;display:grid;position:absolute;inset:0}.classic-face .pip.court{font-weight:800;font-size:calc(var(--w) * .46)}.card-sm .classic-face .corner.br,.card-sm .classic-face .corner i{display:none}.card-sm .classic-face .corner{font-size:calc(var(--w) * .34)}.card-sm .classic-face .pip{font-size:calc(var(--w) * .42);padding-top:18%}.classic-back{background:repeating-linear-gradient(45deg, #ffffff1a 0 4px, transparent 4px 9px), var(--card-back);border:calc(var(--w) * .05) solid var(--card-face);border-radius:inherit;color:var(--card-back-ink);font-family:var(--f-display);font-weight:800;font-size:calc(var(--w) * .4);place-items:center;display:grid;position:absolute;inset:0}