.memory{--memory-card-width: clamp(108px, 19vw, 144px);--memory-card-gap: clamp(6px, 1.2vw, 10px);display:flex;flex-direction:column;gap:clamp(32px,6vw,48px);padding-bottom:clamp(48px,10vh,120px)}.memory-intro{max-width:720px;display:flex;flex-direction:column;gap:16px}.memory-game{display:flex;flex-direction:column;gap:16px;padding:24px clamp(16px,4vw,32px);border-radius:24px;background:#fff;box-shadow:none}.memory-game__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.memory-game__reset{border:none;background:#bfdbfe;color:#0f172a;border-radius:999px;padding:8px 16px;font-size:.95rem;cursor:pointer;transition:background .18s ease,color .18s ease}.memory-game__reset:hover,.memory-game__reset:focus-visible{background:#93c5fd;color:#0f172a}.memory-game__status,.memory-game__message{display:none}.memory-grid{display:grid;justify-content:center;grid-template-columns:repeat(4,minmax(0,var(--memory-card-width)));gap:var(--memory-card-gap)}.memory-card{position:relative;width:var(--memory-card-width);aspect-ratio:5 / 7;border:none;border-radius:6px;padding:0;background:none;cursor:pointer;perspective:1000px}.memory-card:focus-visible{outline:3px solid #60a5fa;outline-offset:4px}.memory-card[data-state=matched]{cursor:default}.memory-card__face{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;backface-visibility:hidden;transition:opacity .24s ease,transform .32s ease;overflow:hidden;background:#fff}.memory-card__face img{width:100%;height:100%;object-fit:contain;padding:6px}.memory-card__face--front{transform:rotateY(180deg);opacity:0}.memory-card__face--back,.memory-card[data-state=visible] .memory-card__face--front,.memory-card[data-state=matched] .memory-card__face--front{transform:rotateY(0);opacity:1}.memory-card[data-state=visible] .memory-card__face--back,.memory-card[data-state=matched] .memory-card__face--back{transform:rotateY(-180deg);opacity:0}.memory-card[data-state=matched]{box-shadow:0 0 0 3px #10b981}.memory-note{max-width:720px}.confetti{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}.confetti__piece{position:absolute;top:-12vh;left:var(--confetti-left, 50%);width:var(--confetti-width, 10px);height:var(--confetti-height, 16px);background:var(--confetti-color, #f97316);border-radius:2px;opacity:0;animation-name:confetti-fall;animation-timing-function:linear;animation-fill-mode:forwards;animation-duration:var(--confetti-duration, 3.6s);animation-delay:var(--confetti-delay, 0ms)}@keyframes confetti-fall{0%{transform:translate3d(0,-12vh,0) rotate(var(--confetti-rotate-start, 0deg));opacity:0}10%{opacity:1}to{transform:translate3d(var(--confetti-drift, 0),120vh,0) rotate(var(--confetti-rotate-end, 720deg));opacity:0}}@media (max-width: 640px){.memory{gap:32px}.memory-game__header{flex-direction:column;align-items:flex-start}.memory{--memory-card-width: clamp(88px, 21vw, 108px);--memory-card-gap: clamp(4px, 1.8vw, 7px)}}
