:root{--card-face:var(--piece-light-top);--card-face-edge:var(--piece-light-deep);--card-ink:var(--piece-light-edge);--card-red:var(--accent-strong);--card-back:var(--accent-strong)}.card{position:relative;display:block;width:var(--card-w,62px);aspect-ratio:5/7;border-radius:calc(var(--card-w, 62px) * .065);border:1px solid var(--card-face-edge);background:var(--card-face);box-shadow:none;font-size:max(9px,calc(var(--card-w, 62px) * .18));line-height:1;overflow:hidden}.card-pip{display:block;fill:currentColor}.card-corner{position:absolute;top:5%;left:7%;gap:.06em;font-weight:800;letter-spacing:-.025em;z-index:5}.card-corner>b{font-family:var(--font-title);font-weight:800}.card-corner[data-flip=true]{right:7%;bottom:5%;transform:rotate(180deg)}.card-corner .card-pip{width:.6em;height:.6em}.card-pips{inset:5% 8%;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(14,1fr);align-items:center;justify-items:center}.card-centre,.card-pips{position:absolute;z-index:1;display:grid}.card-centre{inset:0;place-items:center}.card-centre .card-pip{width:48%;height:auto}.card-back{border-color:color-mix(in srgb,var(--card-face) 82%,transparent);background:var(--card-back);color:var(--on-accent)}.tysiac-musik-card .card{--card-w:52px}@media (max-height:719.98px) and (pointer:coarse),(max-width:1179.98px) and (pointer:coarse){.tysiac-musik-card .card{--card-w:42px}}.gin-opponent .card{--card-w:clamp(26px,6cqw,40px)}.card[data-joker=true]{color:var(--card-black)}.card[data-joker=true] .card-corner b{font-size:calc(var(--card-w, 62px) * .13);letter-spacing:.02em}.card[data-joker=true] .card-centre .card-pip{width:calc(var(--card-w, 62px) * .42)}.gin-pile[data-frozen] .card{box-shadow:0 0 0 2px #7fd4ff}.card{--card-paper:#f6f1e4;--card-paper-edge:#ded5c0;--card-black:#16181d;--card-red:#c3272b;border:1px solid var(--card-paper-edge);border-radius:calc(var(--card-w, 62px) * .075);color:var(--card-black);box-shadow:0 1px 2px rgb(0 0 0/18%);font-size:max(8px,calc(var(--card-w, 62px) * .15))}.card[data-suit=D],.card[data-suit=H]{color:var(--card-red)}.card-corner{display:flex;gap:calc(var(--card-w, 62px) * .04);top:calc(var(--card-w, 62px) * .05);left:calc(var(--card-w, 62px) * .055)}.card-corner b{font-family:var(--font-title,Georgia,"Times New Roman",serif);font-weight:700;letter-spacing:-.02em}.card-corner .card-pip{width:calc(var(--card-w, 62px) * .13)}.card-corner[data-flip=true]{top:auto;right:calc(var(--card-w, 62px) * .055);bottom:calc(var(--card-w, 62px) * .05);left:auto}.card-centre .card-pip{color:inherit;width:calc(var(--card-w, 62px) * .44)}.card.card-back{border-color:color-mix(in srgb,var(--card-face) 82%,transparent);background:var(--card-back);color:var(--on-accent);box-shadow:none}.card-corner{flex-direction:column;align-items:center;gap:calc(var(--card-w, 62px) * .015)}html body [data-played-by][data-played-by]>.card{transform:rotate(var(--tilt,0deg))}.card{isolation:isolate;--card-paper:#fffaf0;--card-paper-edge:#d5cbbb;--card-ink:#20252c;--card-red:#b02136;background:var(--card-paper);border-color:var(--card-paper-edge);color:var(--card-ink);font-size:max(9px,calc(var(--card-w, 62px) * .22));box-shadow:inset 0 0 0 1px #ffffffa8,0 1px 0 #c1b6a5,0 2px 4px #050c1238}.card .card-pips{inset:3% 0}.card .card-corner{top:4%;left:4%;width:15%;gap:.04em;letter-spacing:-.07em}.card .card-corner>b{font-family:Georgia,Times New Roman,serif;font-weight:600}.card .card-corner[data-flip=true]{top:auto;left:auto;right:4%;bottom:4%}.card .card-corner .card-pip{flex-shrink:0;width:.62em;height:.62em}.card[data-joker=true] .card-corner>b{font-size:.51em;letter-spacing:-.04em}.card.card-back{background:#fffaf0 url(/appearance/card-back-crimson.svg) 50%/100% 100% no-repeat}@media (forced-colors:active){.card{border:1px solid CanvasText}}.card[data-art=playloft]{background:#fffdf8}.card .card-art{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.card .card-art,.card .card-phone{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.card .card-phone{display:none}@media (max-height:499px) and (pointer:coarse),(max-width:699px) and (pointer:coarse){.card[data-art=playloft] .card-art{display:none}.card[data-art=playloft] .card-phone{display:block}}