/* Карты TSAI (cards.js): лицо как у настоящей колоды + скины колод. Размер карты задаёт клиент (.pc), всё внутри — в долях. */
.pc.pcx { position: relative; display: block; overflow: hidden; padding: 0; color: #1A1D1B; font-family: Georgia, "Times New Roman", serif;
  background: linear-gradient(160deg, #FFFFFF, #F6F0E2); border: 1px solid #0003; box-shadow: 0 3px 8px #0006, inset 0 0 0 3px #fff, inset 0 0 0 4px #C9A44C55; }
.pc.pcx.red { color: #C62828; }
.pcx .pc-c { position: absolute; display: grid; justify-items: center; line-height: .9; }
.pcx .pc-c b { font-size: 15px; font-weight: 800; letter-spacing: -1px; } .pcx .pc-c i { font-style: normal; font-size: 12px; }
.pcx .pc-c.tl { top: 3px; left: 4px; } .pcx .pc-c.br { bottom: 3px; right: 4px; transform: rotate(180deg); }
.pcx .pc-pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; line-height: 1; text-shadow: 0 1px 0 #fff; }
.pcx .pc-pic { position: absolute; inset: 15% 12%; display: grid; place-items: center; border-radius: 6px; font-size: 24px; line-height: 1;
  background: radial-gradient(circle at 50% 35%, #FFF3D0, #F2DFA8 70%); box-shadow: inset 0 0 0 1.5px #C9A44C; }
.pc.red .pc-pic { background: radial-gradient(circle at 50% 35%, #FFE6E0, #F5C6B8 70%); box-shadow: inset 0 0 0 1.5px #E07B6A; }
.pcx .pc-pic em { position: absolute; bottom: 1px; right: 3px; font-style: normal; font-size: 11px; }
.pcx .pc-ace { position: absolute; inset: 0; display: grid; place-items: center; }
.pcx .pc-ace em { font-style: normal; font-size: 30px; width: 70%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 0 0 2px #C9A44C, inset 0 0 0 4px #FFF3D0; background: #fffdf6; }
.pcx .pc-ace small { position: absolute; bottom: 14%; font-size: 11px; }
.pc.pcx.trump { box-shadow: 0 0 0 2px #F5CF5A, 0 0 12px #F5CF5A99, 0 3px 8px #0006, inset 0 0 0 3px #fff; }
/* --- скины колод --- */
.pc.deck-sakura { background: radial-gradient(circle at 80% 15%, #FFD3E0 0 10%, transparent 11%), radial-gradient(circle at 15% 85%, #FFD3E0 0 9%, transparent 10%), linear-gradient(160deg, #FFF5F8, #FFE4EC); }
.pc.deck-jade { background: linear-gradient(160deg, #E8FFF4, #BFEFD9); box-shadow: 0 3px 8px #0006, inset 0 0 0 3px #E8FFF4, inset 0 0 0 4px #00A86B; }
.pc.deck-jade .pc-pic, .pc.deck-jade .pc-ace em { box-shadow: inset 0 0 0 1.5px #00A86B; }
.pc.deck-night { background: linear-gradient(160deg, #1A2340, #0B1020); color: #8EE3EF; box-shadow: 0 3px 8px #0008, inset 0 0 0 2px #8EE3EF66; }
.pc.deck-night.red { color: #FF7AA8; } .pc.deck-night .pc-pip, .pc.deck-night .pc-c { text-shadow: 0 0 6px currentColor; }
.pc.deck-night .pc-pic { background: radial-gradient(circle at 50% 35%, #2A3F7A, #141B33 70%); box-shadow: inset 0 0 0 1.5px #8EE3EF88; }
.pc.deck-night .pc-ace em { background: #141B33; box-shadow: 0 0 0 2px #8EE3EF, inset 0 0 8px #8EE3EF55; }
.pc.deck-gold { background: linear-gradient(135deg, #FFF8DC, #FFE7A3 40%, #F5CF5A 60%, #FFF3C4); box-shadow: 0 3px 10px #0006, 0 0 10px #FFD76A88, inset 0 0 0 3px #FFF8DC, inset 0 0 0 4px #A8822E; }
.pc.deck-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffffaa 45%, transparent 60%); transform: translateX(-120%); animation: deckShine 2.8s infinite; pointer-events: none; }
@keyframes deckShine { 60%, 100% { transform: translateX(120%); } }
.pc.deck-gold .pc-pic, .pc.deck-gold .pc-ace em { background: radial-gradient(circle at 50% 35%, #FFFDF2, #FFE7A3 70%); box-shadow: inset 0 0 0 1.5px #A8822E; }
/* превью колоды в магазине */
.pc-prev { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.pc-prev .pc.pcx { width: 40px; height: 58px; position: absolute; }
.pc-prev .pc.pcx:first-child { transform: translateX(-10px) rotate(-8deg); } .pc-prev .pc.pcx.tilt { transform: translateX(10px) rotate(8deg); }
.pc-prev .pcx .pc-c b { font-size: 11px; } .pc-prev .pcx .pc-c i { font-size: 9px; } .pc-prev .pcx .pc-pic { font-size: 16px; } .pc-prev .pcx .pc-ace em { font-size: 20px; }