.memo-board{--board:min(100%, calc(100dvh - 130px), 720px);width:var(--board);aspect-ratio:1;grid-template-columns:repeat(var(--n), 1fr);gap:clamp(4px, calc(var(--board) / var(--n) * .08), 12px);display:grid;position:relative;container-type:inline-size}.memo-card{cursor:pointer;perspective:600px;background:0 0;border:0;padding:0}.memo-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .38s var(--ease);display:block;position:relative}.memo-card.is-up .memo-inner{transform:rotateY(180deg)}.memo-back,.memo-front{border-radius:clamp(6px, calc(100cqw / var(--n) * .14), 16px);-webkit-backface-visibility:hidden;backface-visibility:hidden;place-items:center;display:grid;position:absolute;inset:0}.memo-back{border:1px solid var(--line-strong);background:radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.25) 0 14%, transparent 15%), repeating-linear-gradient(45deg, #ffffff0a 0 6px, transparent 6px 12px), linear-gradient(145deg, #2b2a24, #1a1915);box-shadow:var(--shadow-sm);transition:border-color .2s,transform .2s}.memo-card:hover:not(.is-up) .memo-back{border-color:var(--orange)}.memo-front{border:1px solid var(--line);font-size:calc(100cqw / var(--n) * .5);background:linear-gradient(145deg,#f4f1ea,#ddd6c6);line-height:1;transform:rotateY(180deg)}.memo-card.is-matched .memo-front{background:linear-gradient(145deg, rgba(var(--accent-rgb),.25), #7c5cff2e);border-color:rgba(var(--accent-rgb),.5);animation:memo-match .45s var(--ease)}.memo-board.is-paused .memo-card{visibility:hidden}@keyframes memo-match{40%{transform:rotateY(180deg)scale(1.1)}}