/* The deck: 36 vector cards and a back for each look. Every size hangs off --cw, the width of a card. */
:root{--cw:min(19.4vw,13vh,90px);--cwt:min(16vw,7.4vh,66px)}

.card{width:var(--cw);height:calc(var(--cw)*1.42);flex:none;box-sizing:border-box;position:relative;display:block;padding:0;margin:0;
  border-radius:calc(var(--cw)*var(--card-r));border:var(--card-bw) solid var(--card-edge);background:var(--card);color:var(--card-ink);
  box-shadow:var(--sh-card);font-family:var(--f-rank);-webkit-user-select:none;user-select:none;will-change:transform}
.card.red{color:var(--card-red)}
.card svg{display:block;fill:currentColor;overflow:visible}
.card .ix{position:absolute;left:9%;top:5%;display:flex;flex-direction:column;align-items:center;gap:calc(var(--cw)*.04)}
.card .ix b{font-size:calc(var(--cw)*.27);font-weight:var(--w-rank);line-height:1;letter-spacing:-.02em;font-feature-settings:"lnum" 1}
.card .su{width:calc(var(--cw)*.2);height:calc(var(--cw)*.2)}
.card .pip{position:absolute;right:8%;bottom:6%;width:calc(var(--cw)*.54);height:calc(var(--cw)*.54);fill-opacity:var(--pip-fill);stroke:currentColor;stroke-width:var(--pip-stroke);stroke-linejoin:round}
.card.tbl{--cw:var(--cwt)}
.card.mini{--cw:24px;box-shadow:none}

/* a trump carries a corner flag, so it reads at a glance in the hand and on the table */
.card.trump::after{content:"";position:absolute;right:0;top:0;width:calc(var(--cw)*.26);height:calc(var(--cw)*.26);background:linear-gradient(225deg,var(--trump-mark) 50%,transparent 50%);border-top-right-radius:calc(var(--cw)*var(--card-r) - var(--card-bw));pointer-events:none}

/* Ганч: a thin engraved frame inside the face */
[data-theme="ganch"] .card:not(.back)::before{content:"";position:absolute;left:6%;right:6%;top:4.2%;bottom:4.2%;border:1px solid #CDBE9F;border-radius:calc(var(--cw)*.07);pointer-events:none}
[data-theme="ganch"] .card .ix{left:11%;top:6.5%}

/* backs */
.card.back{background:var(--back);color:transparent}
[data-theme="adras"] .card.back{border:max(2px,calc(var(--cw)*.035)) solid #FFF4E0;
  background:#15174A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 86' preserveAspectRatio='none'%3E%3Cpath fill='%23F7B92C' d='M30 9 L36 17 H42 V25 H48 V35 L52 43 L48 51 V61 H42 V69 H36 L30 77 L24 69 H18 V61 H12 V51 L8 43 L12 35 V25 H18 V17 H24 Z'/%3E%3Cpath fill='%23C4283F' d='M30 21 L34 27 H38 V35 L42 43 L38 51 V59 H34 L30 65 L26 59 H22 V51 L18 43 L22 35 V27 H26 Z'/%3E%3Cpath fill='%23FFF4E0' d='M30 33 L36 43 L30 53 L24 43 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
[data-theme="ganch"] .card.back{border:0;
  background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(201,165,92,.55) 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,rgba(201,165,92,.55) 5px 6px),#0A1422;
  box-shadow:inset 0 0 0 1px #C9A55C,inset 0 0 0 calc(var(--cw)*.06) #0A1422,inset 0 0 0 calc(var(--cw)*.06 + 1px) #C9A55C,var(--sh-card)}
[data-theme="ganch"] .card.back::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--cw)*.44);height:calc(var(--cw)*.44);transform:translate(-50%,-50%);border-radius:50%;
  background:#0A1422 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 4.2H19.8V19.8H4.2Z M12 1 23 12 12 23 1 12Z' fill='none' stroke='%23C9A55C' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
[data-theme="topchan"] .card.back{border:2px solid #27211C;
  background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(245,236,220,.85) 7px 8.5px),repeating-linear-gradient(90deg,transparent 0 7px,rgba(245,236,220,.85) 7px 8.5px),#1C6B63;
  box-shadow:inset 0 0 0 calc(var(--cw)*.05) #1C6B63,inset 0 0 0 calc(var(--cw)*.05 + 1.5px) #F5ECDC,var(--sh-card)}
[data-theme="topchan"] .card.back::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--cw)*.36);height:calc(var(--cw)*.36);transform:translate(-50%,-50%);box-sizing:border-box;border:2px solid #27211C;border-radius:50%;
  background:radial-gradient(circle,#AE3F1A 0 36%,#F5ECDC 39%)}
.card.mini.back::after{display:none}
[data-theme="ganch"] .card.mini.back{background:repeating-linear-gradient(45deg,transparent 0 4px,rgba(201,165,92,.55) 4px 5px),repeating-linear-gradient(-45deg,transparent 0 4px,rgba(201,165,92,.55) 4px 5px),#0A1422;box-shadow:inset 0 0 0 1px #C9A55C}
[data-theme="topchan"] .card.mini.back{background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(245,236,220,.85) 5px 6.5px),repeating-linear-gradient(90deg,transparent 0 5px,rgba(245,236,220,.85) 5px 6.5px),#1C6B63;box-shadow:none}

/* an empty place where a card is expected */
.slot{display:block;flex:none;width:var(--cw);height:calc(var(--cw)*1.42);box-sizing:border-box;border:var(--slot);border-radius:calc(var(--cw)*var(--card-r))}

@media (prefers-reduced-motion:reduce){.card{transition:none!important;animation:none!important}}