/* Shared playing cards for the Appently card demos (Battle Blackjack, BattleHoldem, Blind 21).
   Size cards with --cw (card width) on the card or any parent. Everything inside scales from it. */
.pc { position: relative; width: var(--cw, 84px); height: calc(var(--cw, 84px) * 1.4); flex: none; font-size: calc(var(--cw, 84px) * .2); perspective: 900px; user-select: none; -webkit-user-select: none; }
.pc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.3,.7,.25,1); }
.pc.down .pc-in { transform: rotateY(180deg); }
.pc-face { position: absolute; inset: 0; border-radius: calc(var(--cw, 84px) * .085); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.pc-front { background: #fbfaf6; color: #17181d; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 1px rgba(0,0,0,.22), 0 6px 14px -6px rgba(0,0,0,.55); }
.pc-front.pc-red { color: #c8233a; }
.pc-back { transform: rotateY(180deg); background-color: #1c2230; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 14px -6px rgba(0,0,0,.6); }
.pc-back::before { content: ''; position: absolute; inset: 6.5%; border-radius: calc(var(--cw, 84px) * .05); border: 1px solid rgba(255,178,30,.55);
  background:
    repeating-linear-gradient(45deg, rgba(255,178,30,.20) 0 1px, transparent 1px calc(var(--cw, 84px) * .075)),
    repeating-linear-gradient(-45deg, rgba(255,178,30,.20) 0 1px, transparent 1px calc(var(--cw, 84px) * .075)),
    #20283a; }
.pc-back::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%) rotate(45deg); border: 1.5px solid rgba(255,178,30,.85); background: #1c2230; box-shadow: 0 0 0 3px #1c2230; }

/* corner indices */
.pc-idx { position: absolute; display: flex; flex-direction: column; align-items: center; width: .9em; line-height: 1; }
.pc-idx b { font: 800 1em/1 Inter, system-ui, sans-serif; letter-spacing: -.04em; }
.pc-idx b.ten { letter-spacing: -.11em; margin-left: -.1em; }
.pc-idx svg { width: .72em; height: .72em; margin-top: .12em; fill: currentColor; }
.pc-idx.tl { left: 3%; top: 4.5%; }
.pc-idx.br { right: 3%; bottom: 4.5%; transform: rotate(180deg); }

/* number pips */
.pc-pips { position: absolute; left: 30%; right: 30%; top: 20.5%; bottom: 20.5%; }
.pc-pip { position: absolute; width: .98em; height: .98em; fill: currentColor; transform: translate(-50%, -50%); }
.pc-pip.f { transform: translate(-50%, -50%) rotate(180deg); }
.pc-pip.ace { width: 2.3em; height: 2.3em; }
.pc-pip.ace.s { width: 2.75em; height: 2.75em; }

/* court cards: a framed double-ended panel */
.pc-court { position: absolute; left: 21%; right: 21%; top: 8%; bottom: 8%; border-radius: .22em; border: 1.5px solid currentColor; box-shadow: inset 0 0 0 2px #fbfaf6, inset 0 0 0 2.6px currentColor; display: grid; grid-template-rows: 1fr 1fr; overflow: hidden; }
.pc-court::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: .07; }
.pc-court .h { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05em; }
.pc-court .h + .h { transform: rotate(180deg); }
.pc-court .h::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; border-bottom: 1px solid currentColor; opacity: .35; }
.pc-court .h + .h::after { display: none; }
.pc-court b { font: 900 1.55em/1 Inter, system-ui, sans-serif; letter-spacing: -.04em; }
.pc-court svg { width: .95em; height: .95em; fill: currentColor; }
.pc-court svg.crown { width: 1.25em; height: .62em; fill: none; stroke: currentColor; stroke-width: 9; stroke-linejoin: round; margin-bottom: .05em; }

/* states */
.pc.lift .pc-front { box-shadow: 0 0 0 2px var(--you, #ffb21e), 0 10px 22px -8px rgba(0,0,0,.7); }
.pc.dim { filter: brightness(.55) saturate(.6); transition: filter .3s; }
.pc.mark .pc-front { box-shadow: 0 0 0 2px var(--up, #35e39a), 0 10px 22px -8px rgba(0,0,0,.7); }
.pc.bust .pc-front { box-shadow: 0 0 0 2px var(--down, #ff5a6e), 0 10px 22px -8px rgba(0,0,0,.7); }
.pc.win { transform: translateY(-8px); transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.pc-slot { width: var(--cw, 84px); height: calc(var(--cw, 84px) * 1.4); border-radius: calc(var(--cw, 84px) * .085); border: 1.5px dashed rgba(255,255,255,.14); flex: none; }

/* inline card tag for logs and feeds */
.pc-tag { display: inline-flex; align-items: center; gap: 1px; padding: 0 5px; margin: 0 1px; border-radius: 4px; background: #fbfaf6; color: #17181d; font: 800 12px/18px Inter, sans-serif; letter-spacing: -.02em; vertical-align: 1px; }
.pc-tag.pc-red { color: #c8233a; }
.pc-tag svg { width: 10px; height: 10px; fill: currentColor; }
.pc-tag.back { background: #20283a; color: rgba(255,178,30,.9); box-shadow: inset 0 0 0 1px rgba(255,178,30,.4); }

@media (prefers-reduced-motion: reduce) { .pc-in { transition: none; } }