/* Sock Pairs (games/memory.js): pegged cloths on washing lines that turn over. */
.mem { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(#dff1fb, #eef8fd 70%, #d9efc9 70%, #cfe8bd); overflow: hidden; }
:root[data-theme="dark"] .mem { background: linear-gradient(#24324f, #2a3a5b 70%, #2c4a36 70%, #284330); }
.mem-board { display: flex; flex-direction: column; gap: calc(var(--gap, 10px) * 1.2); padding: var(--gap, 10px); }
.mem-row { position: relative; display: flex; gap: var(--gap, 10px); justify-content: center; padding-top: 2px; }
.mem-row::before { content: ""; position: absolute; left: -12px; right: -12px; top: calc(var(--card-w, 80px) * 0.09); height: 2px; border-radius: 2px; background: #8a6a55; opacity: 0.85; }
.mem-card {
  position: relative; width: var(--card-w, 80px); height: calc(var(--card-w, 80px) * 1.3); padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 700px; transform-origin: 50% 4%; -webkit-tap-highlight-color: transparent;
}
.mem-card:focus-visible { outline: none; }
.mem-card:focus-visible .mem-flip { filter: drop-shadow(0 0 0 #ff7a9a) drop-shadow(0 0 4px #ff7a9a); }
.mem-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.46s cubic-bezier(.3,.7,.3,1.15); }
.mem-card.open .mem-flip { transform: rotateY(180deg); }
.mem-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; filter: drop-shadow(0 5px 6px rgba(60, 40, 50, 0.22)); }
.mem-front { transform: rotateY(180deg); }
.mem-art { width: 100%; height: 100%; display: block; overflow: visible; }
.mem-card.sway { animation: mem-sway 3.6s ease-in-out infinite; }
.mem-card.open, .mem-card.matched { animation: none; }
.mem-card.matched .mem-flip { animation: mem-dance 0.7s cubic-bezier(.3,.6,.4,1.4); }
.mem-card.matched .mem-front { filter: drop-shadow(0 0 0 #ffb3c4) drop-shadow(0 4px 10px rgba(255, 122, 154, 0.55)); }
.mem-card.matched::after {
  content: ""; position: absolute; right: 4%; top: 12%; width: 26%; aspect-ratio: 1; border-radius: 50%;
  background: #ff7a9a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath d='M0 6C-10 -2 -8 -10 -3 -10C-1 -10 0 -8 0 -7C0 -8 1 -10 3 -10C8 -10 10 -2 0 6Z' fill='%23fff'/%3E%3C/svg%3E") center / 62% no-repeat;
  box-shadow: 0 0 0 2px #fff; animation: pop-in 0.4s cubic-bezier(.2,.9,.3,1.4) both;
}
.mem-card.nope .mem-flip { animation: mem-nope 0.4s ease-in-out; }
.mem-card.hinted .mem-back { animation: mem-hint 0.7s ease-in-out infinite; }
.mem-card[disabled] { cursor: default; }
.d1.mem-card { animation-delay: -0.5s; } .d2.mem-card { animation-delay: -1.1s; } .d3.mem-card { animation-delay: -1.7s; } .d4.mem-card { animation-delay: -2.3s; } .d5.mem-card { animation-delay: -2.9s; } .d6.mem-card { animation-delay: -3.3s; }
@keyframes mem-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes mem-dance { 0% { transform: rotateY(180deg) translateY(0); } 40% { transform: rotateY(180deg) translateY(-10%) scale(1.06); } 100% { transform: rotateY(180deg); } }
@keyframes mem-nope { 0%, 100% { transform: rotateY(180deg); } 30% { transform: rotateY(180deg) rotate(-5deg); } 65% { transform: rotateY(180deg) rotate(5deg); } }
@keyframes mem-hint { 0%, 100% { filter: drop-shadow(0 0 0 #ffcf5a); transform: translateY(0); } 50% { filter: drop-shadow(0 0 8px #ffcf5a) drop-shadow(0 0 3px #ffb300); transform: translateY(-4px); } }
.reduce .mem-flip { transition-duration: 0.01s; }
.reduce .mem-card.sway, .reduce .mem-card.matched .mem-flip, .reduce .mem-card.nope .mem-flip { animation: none; }