: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)}
.card .corner{position:absolute;left:9cqw;top:8cqw;display:flex;flex-direction:column;align-items:center;gap:2.5cqw;min-width:17cqw;z-index:1}
.card .rank{font:500 21cqw/1 'Geist',system-ui,sans-serif;letter-spacing:-.04em}
.card .fig{display:block;width:20cqw;height:20cqw}
.card .fig svg{display:block;width:100%;height:100%}
.card .suit{display:block;width:15cqw;height:15cqw;fill:var(--c)}
.card .mid{position:absolute;inset:0;display:grid;place-items:center;padding-top:9cqw}
.card .mid .suit{width:52cqw;height:52cqw}
.card .mid.is-fig svg{display:block;width:62cqw;height:62cqw}
.card .fn{position:absolute;top:10cqw;right:10cqw;font:500 11cqw/1 'Geist Mono',monospace;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:2cqw;height:14cqw}
.card .fn svg{width:15cqw;height:15cqw;fill:none;stroke:currentColor;stroke-width:2;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}