/* ==========================================================================
   Memory – Karten mit 3D-Dreh, Paare in Spielerfarbe
   ========================================================================== */
.mm { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 10px 12px; overflow: hidden; }
.mm.table { padding: 8px 24px 20px; gap: 14px; }
.mm-rail { margin: 0 -6px; }

.mm-board { flex: 1; min-height: 0; display: grid; place-items: center; }
.mm-grid { display: grid; grid-template-columns: repeat(var(--cols), var(--cs)); gap: var(--gap, 8px); }
.mcard { position: relative; width: var(--cs); height: var(--cs); perspective: 700px; cursor: pointer; border: 0; padding: 0; background: none; }
.mcard .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); }
.mcard.open .in, .mcard.done .in { transform: rotateY(180deg); }
.mcard .fc { position: absolute; inset: 0; border-radius: 10%; backface-visibility: hidden; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 14px -6px rgba(0, 0, 0, .5); }
.mcard .bk { background: var(--grain), repeating-linear-gradient(45deg, rgba(251, 246, 234, .06) 0 2px, transparent 2px 11px), repeating-linear-gradient(-45deg, rgba(251, 246, 234, .06) 0 2px, transparent 2px 11px), #26385f; box-shadow: inset 0 0 0 calc(var(--cs) * .045) #fbf6ea, 0 2px 4px rgba(0, 0, 0, .3), 0 8px 14px -6px rgba(0, 0, 0, .5); display: grid; place-items: center; }
.mcard .bk span { font: 900 calc(var(--cs) * .3)/1 var(--display); color: #d9a23a; opacity: .85; }
.mcard .fr { transform: rotateY(180deg); background: #fbf6ea; box-shadow: inset 0 0 0 calc(var(--cs) * .045) #fbf6ea, 0 2px 4px rgba(0, 0, 0, .3), 0 8px 14px -6px rgba(0, 0, 0, .5); }
.mcard .fr > svg, .mcard .fr > img, .mcard .fr > .mf-animal { position: absolute; inset: calc(var(--cs) * .045); width: calc(100% - var(--cs) * .09); height: calc(100% - var(--cs) * .09); border-radius: 7%; }
.mcard:not(.open):not(.done):hover .in { transform: translateY(-3px) rotate(-1deg); }
.mcard.off { cursor: default; }
.mcard.done .fr { box-shadow: inset 0 0 0 calc(var(--cs) * .045) var(--c), 0 2px 4px rgba(0, 0, 0, .3); }
.mcard.done { animation: mmMatch .7s var(--spring); }
@keyframes mmMatch { 40% { transform: scale(1.12) rotate(-3deg); } }
.mcard.miss .in { animation: mmMiss .5s ease .55s; }
@keyframes mmMiss { 20%, 60% { transform: rotateY(180deg) translateX(-4px); } 40%, 80% { transform: rotateY(180deg) translateX(4px); } }
.mcard.gone { visibility: hidden; }
.mm-flycard { width: 100%; height: 100%; border-radius: 10%; overflow: hidden; background: #fbf6ea; box-shadow: inset 0 0 0 4px #fbf6ea; }
.mm-flycard > svg, .mm-flycard > img, .mm-flycard > .mf-animal { width: 100%; height: 100%; display: block; border-radius: 10%; }
.mf-svg { width: 100%; height: 100%; display: block; }
.mf-img { object-fit: cover; }
.mf-animal { display: grid; place-items: center; }
.mf-animal .av-svg { width: 74%; height: 74%; margin-top: -8%; }
.mf-animal span, .mf-cap { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font: 700 calc(var(--cs) * .13)/1 var(--hand); color: var(--ink); }
.mf-cap { bottom: 9%; font: 800 calc(var(--cs) * .085)/1 var(--text); color: var(--ink-2); letter-spacing: .04em; }

/* Lobby: Fotos & Sets */
.mm-cfg { padding: 14px !important; gap: 12px; text-align: left; }
.mm-cfg .row { display: flex; flex-direction: column; gap: 8px; }
.mm-cfg .row > span { font: 800 10.5px var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.mm-sets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mm-set { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 0; border-radius: 10px; cursor: pointer; text-align: left; color: var(--ink); background: rgba(43, 35, 30, .05); box-shadow: inset 0 0 0 1px var(--line); }
.mm-set .pv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; --cs: 40px; }
.mm-set .pv > div { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: #fbf6ea; }
.mm-set .pv > div > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-set .pv .mf-animal span, .mm-set .pv .mf-cap { display: none; }
.mm-set b { font: 800 14px var(--display); } .mm-set small { color: var(--ink-3); font: 600 11.5px var(--text); }
.mm-set.on { box-shadow: inset 0 0 0 2.5px var(--ink); background: rgba(43, 35, 30, .09); }
.mm-set[disabled] { cursor: default; }
.mm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.mm-ph { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #26385f; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); animation: popIn .35s var(--spring) both; }
.mm-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-ph .hid { position: absolute; inset: 0; display: grid; place-items: center; background: var(--grain), repeating-linear-gradient(45deg, rgba(251, 246, 234, .07) 0 2px, transparent 2px 9px), #26385f; color: #d9a23a; font: 900 22px var(--display); }
.mm-ph .who { position: absolute; left: 4px; bottom: 4px; }
.mm-ph .who .av { --s: 22px; display: block; padding: 2px; }
.mm-ph .del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(28, 18, 12, .75); }
.mm-ph .del .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.mm-add { aspect-ratio: 1; border-radius: 8px; border: 2px dashed var(--line-2); display: grid; place-items: center; cursor: pointer; color: var(--ink-3); font: 700 12px var(--text); text-align: center; padding: 6px; background: none; }
.mm-add .ic { width: 22px; height: 22px; display: block; margin: 0 auto 2px; }
.mm-bar { display: flex; align-items: center; gap: 8px; font: 700 13px var(--text); color: var(--ink-2); }
.mm-bar .hs-bar { flex: 1; }
.mm-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 14px var(--text); }