:root{
  --srdce:#ff5560; --kule:#ffae2b; --listy:#46d68a; --zaludy:#c8a27c;
  --fg:#fff; --cut:#1b1c20;
}
.card{position:relative;width:var(--w,92px);aspect-ratio:5/7;border-radius:calc(var(--w,92px)*.16);overflow:hidden;
  padding:calc(var(--w,92px)*.1) calc(var(--w,92px)*.115);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  color:#fff;container-type:inline-size;user-select:none;-webkit-user-select:none;
  /* bez backdrop-filter: karty se pořád hýbou a na telefonu by to trhalo */
  background:
    radial-gradient(90% 62% at 50% 62%,color-mix(in srgb,var(--c) 34%,transparent),transparent 72%),
    linear-gradient(155deg,#3b3c43,#222327 58%,#2a2b30);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(0,0,0,.45)}
.s-h{--c:var(--srdce)} .s-b{--c:var(--kule)} .s-l{--c:var(--listy)} .s-a{--c:var(--zaludy)}
/* hodnota je jediné, co je vidět v překryté ruce: velká a v barvě karty */
.card .corner{position:absolute;left:9cqw;top:6cqw;z-index:1}
.card .rank{display:block;font:600 27cqw/1 'Geist',system-ui,sans-serif;letter-spacing:-.05em;color:var(--c)}
.card .suit{display:block;width:21cqw;height:21cqw;fill:var(--c)}
.card .mid{position:absolute;inset:0;display:grid;place-items:center;padding-top:14cqw}
.card .mid .suit{width:58cqw;height:58cqw}
.card .mid.is-fig svg{display:block;width:66cqw;height:66cqw}
/* sedma: symbol se posune nahoru a pod ním je +2, odsazené od spodku */
.card .mid.has-fn{padding-top:0;padding-bottom:12cqw}
.card .mid.has-fn .suit{width:46cqw;height:46cqw}
.card .fn{position:absolute;left:50%;bottom:15cqw;transform:translateX(-50%);display:flex;align-items:center;gap:1.500cqw;white-space:nowrap;
  height:23cqw;padding:0 7cqw;border-radius:99cqw;background:var(--c);color:#141418;font:600 16cqw/1 'Geist',system-ui,sans-serif;letter-spacing:-.02em}
.card .fn svg{width:14cqw;height:14cqw;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.card.back{padding:0;display:block;background:linear-gradient(155deg,#2c2d33,#17181b)}
.card.back .dots{position:absolute;inset:0;width:100%;height:100%;fill:#fff}