/* Shared card look for TriPeaks, Spider and Pyramid: our own face and back design. */
.cg-main { flex: 1; display: flex; justify-content: center; padding: 16px 12px 28px; }
.cg-wrap { width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.cg-table { position: relative; width: 100%; border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, #1f7a4a 0%, #135c37 60%, #0e4a2c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.12); touch-action: manipulation; overflow: hidden; }
.pc { position: absolute; border-radius: calc(var(--cw) * 0.1); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.12); cursor: pointer; transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s, opacity 0.2s; user-select: none; }
.pc-red { color: #d12b20; } .pc-black { color: #1d1d1f; }
.pc-tl { position: absolute; top: 5%; left: 8%; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pc-tl b { font-size: calc(var(--cw) * 0.3); font-weight: 650; letter-spacing: -0.04em; }
.pc-tl i { font-style: normal; font-size: calc(var(--cw) * 0.24); margin-top: 1px; }
.pc-mid { position: absolute; right: 9%; bottom: 7%; font-size: calc(var(--cw) * 0.5); line-height: 1; }
.pc-back { background: #15803d; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.09) 0 4px, transparent 4px 9px); box-shadow: inset 0 0 0 calc(var(--cw) * 0.06) #fff, 0 1px 2px rgba(0,0,0,0.25); cursor: default; }
.pc-slot { background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22); cursor: default; }
.pc-slot.pc-click { cursor: pointer; }
.pc-dim { filter: brightness(0.86); }
.pc-sel { transform: translateY(-6%); box-shadow: 0 0 0 3px #facc15, 0 8px 18px rgba(0,0,0,0.3); z-index: 500 !important; }
.pc-hint { box-shadow: 0 0 0 3px rgba(250,204,21,0.8), 0 2px 6px rgba(0,0,0,0.2); }
.pc-nope { animation: pc-nope 0.28s ease; }
.pc-in { animation: pc-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes pc-nope { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
@keyframes pc-in { from { opacity: 0; translate: 0 -12px; } }
.cg-count { position: absolute; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.cg-label { position: absolute; color: rgba(255,255,255,0.75); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; text-align: center; }
.cg-pts { height: 26px; margin-top: 8px; font-size: 17px; font-weight: 600; color: #15803d; opacity: 0; transition: opacity 0.2s; }
.cg-pts.show { opacity: 1; }
.cg-hint { font-size: 13px; color: #86868b; text-align: center; margin: 4px 0 0; line-height: 1.45; max-width: 560px; }
@media (prefers-reduced-motion: reduce) { .pc { transition: none; } .pc-nope, .pc-in { animation: none; } }