/* 2026-10-31 real hands (AI photos) — fist / open palm / palm with the ring; left hands mirrored so tiles look like pairs */
.hands { gap: 8px; }
.hand { min-height: 104px; padding: 6px 2px 4px; justify-content: flex-end; overflow: hidden; }
.hand .hand-img { width: 100%; height: 78px; object-fit: contain; object-position: center bottom; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35)); }
.hand:nth-child(even) .hand-img { transform: scaleX(-1); }
.hand small { margin-top: 2px; line-height: 1.1; }
.hand.open .hand-img { animation: palm-open .35s ease-out; }
.hand.open:not(.found) .hand-img { opacity: .8; }
.hand.found .hand-img { filter: drop-shadow(0 0 10px rgba(255, 214, 90, .95)) drop-shadow(0 4px 5px rgba(0, 0, 0, .35)); }
.hand.found::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(255, 230, 140, .55), transparent 60%); pointer-events: none; animation: ring-glow 1.2s ease-in-out infinite alternate; }
@keyframes palm-open { 0% { transform: scale(.85) translateY(6px); } 70% { transform: scale(1.06); } }
.hand:nth-child(even).open .hand-img { animation-name: palm-open-l; }
@keyframes palm-open-l { 0% { transform: scaleX(-1) scale(.85) translateY(6px); } 70% { transform: scaleX(-1) scale(1.06); } 100% { transform: scaleX(-1); } }
@keyframes ring-glow { to { opacity: .45; } }
/* the ring itself, big on the palm so everybody sees it (owner: «المحبس ما يبين») */
.hand .ring-big { position: absolute; left: 50%; top: 40%; width: 64%; max-width: 62px; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; filter: drop-shadow(0 0 8px rgba(255, 220, 110, .95)) drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); animation: ring-big-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ring-big-pop { 0% { transform: translate(-50%, -10%) scale(.2); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }