/* Dutch: the table furniture and states only Dutch has (public/games/dutch.js) */

/* Match, while armed: tap your matching card */
#matchBtn.armed { background: rgba(207, 58, 64, 0.22); color: #ffe0d6; box-shadow: inset 0 0 0 1px #ff8a7a; animation: hotPulse 0.9s infinite; }
#table.matching .card.mine .lift { animation: wiggle 0.5s ease-in-out infinite; }
@keyframes wiggle { 25% { transform: rotate(-3deg) translateY(-3%); } 75% { transform: rotate(3deg) translateY(-3%); } }
@media (hover: hover) and (pointer: fine) {
  #matchBtn:disabled kbd.key { opacity: 0.45; }
  #matchBtn.armed kbd.key { color: #ffe0d6; background: rgba(255, 138, 122, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 138, 122, 0.7), inset 0 -2px 0 rgba(0, 0, 0, 0.3); }
}

/* the drawn card's slot (invisible) and its "… draw" label */
.slot.held { border: 0; opacity: 0; pointer-events: none; }
.held-label {
  position: absolute; left: 0; top: 0; z-index: 350; pointer-events: none; white-space: nowrap;
  font-size: calc(14px * var(--ui)); font-weight: 600; font-style: italic; color: var(--gold); text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity 0.3s, transform 0.5s var(--ease);
}
.held-label.on { opacity: 1; }
#table.instant .held-label { transition: none !important; }

/* someone peeked at a card (Queen); a wrong match */
.card.peeked .lift { animation: peeked 1.6s var(--ease); }
@keyframes peeked { 20%, 70% { transform: translateY(-14%) rotate(-6deg); } }
.card.wrong .lift { animation: shake 0.6s; }
.card.wrong .front { box-shadow: 0 0 0 3px var(--red), 0 0 24px rgba(255, 60, 60, 0.7); }
@keyframes shake { 15%, 55% { transform: translateX(-9%) rotate(-5deg); } 35%, 75% { transform: translateX(9%) rotate(5deg); } }

/* name plate badges: locked after a wrong match, using a special card, called Dutch */
.plate .bd .lock { color: #ff9d92; }
.plate .bd .fx { color: var(--gold); font-size: 14px; line-height: 1; }
.plate .bd .dutch-b { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 12px; line-height: 1.3; color: #fff; background: var(--red); padding: 0 7px; border-radius: 99px; }