/* Playing cards and casino chips, shared by every card game and the games page. */

/* ---------- cards ---------- */
.cd { position: relative; flex: none; width: var(--cw, 78px); height: calc(var(--cw, 78px) * 1.41); border-radius: calc(var(--cw, 78px) * .1);
  font-size: calc(var(--cw, 78px) * .2); background: linear-gradient(160deg, #fffef9, #f1ebdc);
  box-shadow: 0 1px 0 #cfc5ad, 0 12px 22px -8px rgba(0,0,0,.8), inset 0 0 0 1px #d9cfb6; }
.cd .k { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .95; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }
.cd .k b { font-size: 1.05em; } .cd .k i { font-style: normal; font-size: .75em; }
.cd .k.tl { left: 6%; top: 4%; } .cd .k.br { right: 6%; bottom: 4%; transform: rotate(180deg); }
.cd .pp { position: absolute; font-family: Georgia, serif; font-size: 1em; transform: translate(-50%, -50%); line-height: 1; }
.cd .pp.r { transform: translate(-50%, -50%) rotate(180deg); }
.cd .red { color: #c3122e; } .cd .blk { color: #18142e; }
.cd .face { position: absolute; left: 17%; top: 14%; width: 66%; height: 72%; }
.cd .ace { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Georgia, serif; font-size: 2.9em; line-height: 1; }
.cd.back { background: #fffef9; }
.cd.back svg { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
.cd.deal { animation: deal21 .6s cubic-bezier(.2,.9,.3,1.15) backwards; }
@keyframes deal21 { from { transform: translate(var(--fx, 260px), var(--fy, -220px)) rotate(70deg) scale(.6); opacity: 0; } }
.cd.flip { animation: flip21 .5s ease backwards; }
@keyframes flip21 { 0% { transform: rotateY(90deg) rotate(var(--r, 0deg)); } 100% { transform: rotateY(0) rotate(var(--r, 0deg)); } }
/* the joker (biriba): a jester's cap, a star in each corner */
.cd.jk .k b { font-size: .95em; } .cd.jk .k i { font-size: .6em; font-weight: 900; letter-spacing: .02em; }
.cd.jk .k.jkw { gap: 0; } .cd.jk .k.jkw i { font: 900 .62em/.92 'Inter', system-ui, sans-serif; letter-spacing: 0; }
.cd.jk.red .k { color: #c3122e; } .cd.jk.blk .k { color: #18142e; }
.cd.jk .jkr { position: absolute; left: 16%; top: 15%; width: 68%; height: 70%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
/* (a card leaving) */
.cd.gone { transition: transform .35s ease-in, opacity .35s; transform: translate(-40px, -30px) rotate(-20deg) scale(.8) !important; opacity: 0; }

/* ---------- chips ---------- */
.ch { position: relative; display: inline-block; width: 44px; height: 44px; border-radius: 50%; --c: #b3122e; --e: #6e0a1b;
  background: radial-gradient(circle, var(--c) 0 52%, transparent 53%), repeating-conic-gradient(from 8deg, #f5f1e6 0 16deg, var(--c) 16deg 60deg);
  box-shadow: 0 2px 0 var(--e), 0 3px 0 #f5f1e6, 0 4px 0 var(--e), 0 8px 10px -3px rgba(0,0,0,.6), inset 0 1px 2px rgba(255,255,255,.55); }
.ch::after { content: attr(data-v); position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 55%), var(--c);
  border: 1.5px dashed rgba(255,255,255,.8); display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.ch::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 45%); pointer-events: none; z-index: 1; }
.ch.cv0 { --c: #e8e3d6; --e: #8f8a7c; } .ch.cv0::after { color: #3a3450; text-shadow: none; }
.ch.cv1 { --c: #b3122e; --e: #6e0a1b; } .ch.cv2 { --c: #1d56c7; --e: #0e2f73; } .ch.cv3 { --c: #12875a; --e: #07472f; }
.ch.cv4 { --c: #1c1830; --e: #050409; } .ch.cv5 { --c: #7c3aed; --e: #3f1a86; }
/* stacks: an amount as a few piles of chips */
.stack { position: relative; display: inline-block; width: 30px; height: 40px; margin: 0 2px; }
.stack .ch { position: absolute; left: 0; bottom: calc(var(--j) * 4px); width: 30px; height: 30px; animation: chipIn .45s cubic-bezier(.3,1.6,.5,1) backwards; animation-delay: calc(var(--k) * 60ms + var(--j) * 40ms); }
.stack .ch::after { font-size: 0; }
.stack .ch.tip::after { font-size: 7px; }
@keyframes chipIn { from { transform: translateY(-40px) rotate(-90deg); opacity: 0; } }
.ch.fly { position: absolute; width: 30px; height: 30px; z-index: 30; pointer-events: none; transition: transform .7s cubic-bezier(.3,.8,.3,1), opacity .7s .2s; }
.ch.fly::after { font-size: 0; }

/* a hand that is decided: its closed cards lift, turn over and settle, all together */
.cd.reveal { animation: reveal21 .75s cubic-bezier(.3,1.3,.5,1) backwards; }
@keyframes reveal21 { 0% { transform: translateY(0) rotateY(90deg) rotate(var(--r, 0deg)); } 55% { transform: translateY(-16px) rotateY(0) scale(1.1) rotate(var(--r, 0deg)); } 100% { transform: rotate(var(--r, 0deg)); } }
/* a card on its way somewhere over the table (a shuffle) */
.cd.flying { --cw: 56px; position: absolute; z-index: 40; pointer-events: none; transition: transform .6s cubic-bezier(.4,.1,.3,1); }
/* ---------- 10 Phases: the numbers 1 to 12 in four colours (an upright white tile with three little steps — our own
   sign of the phases), the Wild (a gold star in a ring of the four colours, on night blue), the Skip ---------- */
.cd.p10 { --pc: #e3263f; --pd: #8f0f22; overflow: hidden; background: linear-gradient(165deg, var(--pc) 0%, var(--pd) 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 12px 22px -8px rgba(0,0,0,.8), inset 0 0 0 calc(var(--cw, 78px) * .04) #fff, inset 0 0 0 calc(var(--cw, 78px) * .055) rgba(0,0,0,.18); }
.cd.p10.p-b { --pc: #2479ea; --pd: #0f3c8c; } .cd.p10.p-g { --pc: #1db463; --pd: #0b5f31; } .cd.p10.p-y { --pc: #f6bd16; --pd: #a87400; }
.cd.p10 .k { color: #fff; font-family: 'Inter', system-ui, sans-serif; font-weight: 900; font-size: .95em; text-shadow: 0 1px 0 rgba(0,0,0,.35); z-index: 1; }
.cd.p10 .k.tl { left: 9%; top: 6%; } .cd.p10 .k.br { right: 9%; bottom: 6%; }
.cd.p10 .p10t { position: absolute; left: 17%; right: 17%; top: 21%; bottom: 21%; border-radius: 16%;
  background: linear-gradient(170deg, #fff 0%, #f6f3ec 60%, #e6e0d2 100%);
  box-shadow: inset 0 calc(var(--cw, 78px) * -.025) 0 rgba(0,0,0,.08), 0 calc(var(--cw, 78px) * .02) calc(var(--cw, 78px) * .06) rgba(0,0,0,.35); }
.cd.p10 .p10t::after { content: ''; position: absolute; left: 50%; bottom: 9%; width: 34%; height: 13%; transform: translateX(-50%);
  background: linear-gradient(var(--pc), var(--pc)) 0 100% / 26% 40% no-repeat, linear-gradient(var(--pc), var(--pc)) 50% 100% / 26% 70% no-repeat,
              linear-gradient(var(--pc), var(--pc)) 100% 100% / 26% 100% no-repeat; opacity: .55; }
.cd.p10 .nn { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 6%; font-family: 'Inter', system-ui, sans-serif; font-weight: 900;
  font-size: 2.1em; letter-spacing: -.05em; color: var(--pc); text-shadow: .04em .05em 0 var(--pd); }
.cd.p10.pw { background: radial-gradient(circle at 40% 30%, #3a2f8a 0%, #1b1550 55%, #0c0926 100%); }
.cd.p10.pw .wild { position: absolute; left: 50%; top: 50%; width: 66%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, #1b1550 76%, transparent 77%), conic-gradient(#e3263f, #f6bd16, #1db463, #2479ea, #e3263f);
  box-shadow: 0 4px 12px rgba(0,0,0,.55); display: grid; place-items: center; }
.cd.p10.pw .wild b { font-size: 2em; line-height: 1; color: #ffd866; text-shadow: 0 0 .25em rgba(255,216,102,.7), 0 .05em 0 #a8771a; }
.cd.p10.pw .k { color: #ffd866; }
.cd.p10.ps { --pc: #333d74; --pd: #10153a; }
.cd.p10.ps .skip { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.cd.p10.ps .skip svg { display: block; width: 100%; height: 100%; }