/* Card geometry is shared by editor preview, templates, sequences and play. */
.memory-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 18px; padding: 22px 16px; isolation: isolate; }
.memory-slot { min-width: 0; position: relative; }
.memory-slot:has(.is-enlarged) { z-index: 3; pointer-events: none; }
.memory-card { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: transparent; color: #173e35; cursor: pointer; perspective: 900px; font: inherit; text-align: center; }
/* Revealed cards are disabled to prevent extra clicks, not to dim their content.
   Keep this stronger than disabled-button styles in embedding sequence views. */
.memory-board .memory-card:disabled { opacity: 1; cursor: default; }
.memory-card:focus-visible { outline: 3px solid #16775c; outline-offset: 6px; border-radius: 12px; }
.memory-card-scale, .memory-card-flip { display: block; width: 100%; height: 100%; position: relative; }
.memory-card-scale { transition: transform 140ms ease; pointer-events: none; }
.memory-scattered .memory-card-scale { transform: rotate(var(--memory-angle)); }
.memory-card.is-enlarged .memory-card-scale { transform: translate(var(--memory-zoom-x, 0px), var(--memory-zoom-y, 0px)) scale(var(--memory-zoom, 1.45)); }
.memory-card-flip { transform-style: preserve-3d; transition: transform 180ms ease; }
.memory-card.is-open .memory-card-flip { transform: rotateY(180deg); }
.memory-card-back, .memory-card-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; border: 2px solid #c9dfd7; box-shadow: 0 3px 8px #153c3014; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: auto; }
.memory-card-back { background: #16775c; color: #fff; border-color: #126348; }
.memory-card-back svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2; }
.memory-card-front { transform: rotateY(180deg); background: #fff; flex-direction: column; gap: 5px; overflow-wrap: break-word; word-break: normal; -webkit-hyphens: auto; hyphens: auto; font-size: 16px; line-height: 1.25; }
.memory-card-front > span { max-width: 100%; }
.memory-card-image { display: block; max-width: 100%; max-height: 70%; width: auto; height: auto; object-fit: contain; flex-shrink: 1; min-height: 0; }
.memory-card-image:only-child { max-height: 100%; }
.memory-card.is-matched .memory-card-front { border-color: #16775c; background: #f0f9f4; }
.memory-result { text-align: center; font-size: 14px; }
.memory-result:empty { display: none; }
.memory-preview-note { display: block; margin: 12px 0; color: #52675e; font-size: 12px; }
#memoryEditor [data-memory-panel][hidden] { display: none !important; }
#memoryEditor .memory-editor-image { display: block; max-width: 100%; max-height: 140px; object-fit: contain; margin-bottom: 6px; }
#memoryPreviewTitle { display: none; }
.memory-task-graphic svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.7; }
@media (max-width: 800px) { #memoryEditor { display: flex; flex-direction: column; min-height: 0; height: auto; max-height: none; overflow: visible; } .memory-board { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .memory-card-flip, .memory-card-scale { transition: none; } }

#memoryPreviewLabel { display: block; margin-bottom: 12px; }
#memoryPreviewInstruction { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: var(--muted); }

@media (max-width: 600px) { .memory-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px 8px; } .memory-card { aspect-ratio: 1; min-height: 100px; } .memory-card-front { padding: 6px; font-size: 14px; } }

.memory-board.memory-scattered { display: block; position: relative; padding: 0; }
.memory-scattered > .memory-slot { position: absolute; }
.memory-scattered .memory-card { height: 100%; aspect-ratio: auto; min-height: 0; }